CSS清除浮动

为什么要清除浮动？

浮动脱离了正常的文档流，会导致各种布局问题，比如最常见的父元素塌陷，同级别兄弟元素定位异常等。

 

浮动有如下特征：

1. 脱离标准文档流

2. 紧贴父元素边缘

3. 若浮向最左侧，会覆盖最左侧元素，但原来元素的文字会围绕浮动元素

4. 设置浮动后，块级元素会收为内部元素的宽度

导致父元素塌陷代码如下所示：

.parent{
            border: solid 5px;
       } 
.child{
            float: left;
            height: 100px;
            width: 100px;
            background-color: yellow;
        }
 <div class="parent clearfix">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
  </div>

 

给父元素设置高度

相当于用固定高度撑起父元素。不推荐，可扩展性弱，可维护性差。

clear属性

优点：简单，兼容性好。

有四种情况：

1. 父元素最后一个元素浮动

   给父元素的最后添加一个空的块级元素，设置样式clear：both。

   缺点：添加冗余元素，可维护性不好。

    <div class="parent clearfix">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="clear"></div>
      </div>

    .clear{
      clear: "both";
    }

    

2. 父元素非最后一个元素浮动

   给浮动元素的邻接元素设置clear：both

    <div class="parent clearfix">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="content">xxx</div>//这里是有内容的
     </div>

    

   .content{
      clear: 'both';
    }

    

3. 使用伪元素（推荐，使用较多）

   兼容好，不产生新标签，不会带来其他问题。唯一的缺点是代码比较多。

   /*给父元素添加clearfix类*/
   .clearfix::after{
       content: '';
       display: block;
       clear: both;
       height: 0;
       line-height: 0;
       visibility: hidden;
    } 
   .clearfix{
       *zoom: 1;
       /*IE低版本兼容*/
   }

    

   还可以使用双伪元素：

    .clearfix:after,.clearfix:before{
        content: "";
        display: block;
    }
    .clearfix:after{
       clear: both;
    }
    .clearfix{
       *zoom: 1;
    }

    

   这里我有点疑问，不知道为什么单伪元素就能解决为什么要用双伪元素，我看到网上的双伪元素方法中，以上代码的display用的table，但我试了一下结果是一样的。留个疑问，以后查到更新。

4. 使用br，它有clear这个属性，设置值为‘all’，放在子元素末尾即可。

   <div class="parent clearfix">
           <div class="child"></div>
           <div class="child"></div>
           <div class="child"></div>
           <br clear="all" />
    </div>

    

    

添加块级格式化上下文BFC

BFC是一个独立渲染区域，将内部与外部完全分隔开来，内部元素无法影响到外部。

它可以解决：

1. 垂直边距重叠，阻止外边距叠加

2. 不会重叠浮动元素

3. 可以包含浮动元素

   触发条件：

   1. overflow除去visible以外的值，包括hidden，scroll，auto

   2. position：absolute或fixed

   3. float left或者right

   4. display：table-cell / table-caption / inline-block

为什么讲BFC，主要在于以上提到的BFC可以解决的问题：它可以包含浮动元素，并且不会影响外部。

那么可想而知，只要可以触发父元素BFC，就能解决浮动问题。

当然，以上方法各有各的优缺点。

1. 使用overflow时，要处理IE浏览器的兼容问题最好使用hidden值，同时，定义父元素宽度或者给父元素设置zoom属性。代码如下：

   .father{
       overflow: hidden;
       *zoom: 1;/*IE专属*/
      /*width: 200px;设置一种即可*/
   }

    

但设置hidden后，可能会导致溢出元素被隐藏，不推荐使用。

2. 使用positon，增加多余定位，可能带来不必要的问题，不推荐。

3. 给父元素也定义浮动，可能会带来新的浮动问题，不推荐使用。

4. 使用table，会将盒模型改变，不推荐使用。