【再学CSS】浮动引起的问题及清除浮动

一、认识浮动

• float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
• 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
• 可以通过float属性让元素产生浮动效果，float的常用取值
• none：不浮动，默认值
• left：向左浮动
• right：向右浮
• clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
• clear的常用取值
• left：要求元素的顶部低于之前生成的所有左浮动元素的底部
• right：要求元素的顶部低于之前生成的所有右浮动元素的底部
• both：要求元素的顶部低于之前生成的所有浮动元素的底部
• none：默认值，无特殊要求
• 那么我们可以利用这个特性来清除浮动

1.1 浮动的规则

1. 元素一旦浮动后, 脱离标准流

   • 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
   • 定位元素会层叠在浮动元素上面

   

2. 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

3. 浮动元素之间不能层叠

   • 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
   • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

4. 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

   • 比如行内级元素、inline-block元素、块级元素的文字内容

5. 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

二、浮动带来的问题

• 与浮动元素同级的非浮动元素会跟随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素也都浮动，否则会影响页面的显示结构
• 父元素的高度无法撑开

2.1 高度塌陷

• 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
  • 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="buttom"></div>

在未设置浮动时，页面布局为：

当给class为item的子盒子设置了float:left时，如下图所示，出现了页面布局混乱，造成了高度塌陷

• 解决父元素高度坍塌问题的过程，一般叫做清除浮动
• 清除浮动的目的是：让父元素计算总高度的时候，把浮动子元素的高度算进去

三、清除浮动的方法

1. 给父元素设置固定高度，扩展性不好（不推荐）

2. 方法二: 在父元素最后增加一个空的块级子元素，并且让它设置**clear: both **

   • 会增加很多无意义的空标签，维护麻烦

   • 违反了结构与样式分离的原则（不推荐）

     

3. 给父元素添加::after伪元素

       .clear-fix::after {
         content: "";
         display: block;
         clear: both;
   
         visibility: hidden; /* 浏览器兼容性 */
         height: 0; /* 浏览器兼容性 */
       }
   
       .clear-fix {
         *zoom: 1; /* IE6/7兼容性 */
       }
   

   clear属性只有块级元素才有效的，而::after等伪元素默认都是行内元素，所以借助伪元素清除浮动影响时需要设置display属性值。

4. 触发BFC来清除浮动，给父元素设置overflow（前提：浮动的父级元素高度为auto）