清除浮动

Posted 2020-12-26 171220-barney

清除浮动

浮动元素会脱离文档流，使得行内元素环绕它的效果，但是它也会造成父元素塌陷、元素重叠的问题，所以这个时候就需要清除浮动带来的影响。清除浮动的方法主要有三种：

以这段代码为例：

<div class="content">
    <div class="a"></div>
    <div class="b"></div>
    这里面是一段文字效果
</div>
<style>
    .a, .b{
        width:50px;
        height:100px;
        border: 1px solid green;
    }
    .a{
        float:left;
    }
    .b{
        float:right;
    }
    .content{
        width:100%;
        border:1px solid pink;
        clear:both;
    }
</style>

上面的代码中，由于a、b脱离文档流并分别位于content的两侧，而此时content的高度仅仅只是文字的高度，这是因为a、b两个元素浮动造成了父元素塌陷，那么消除浮动带来的影响呢？

1. div+clear

   在content内加一个div的空白元素如下：

   <div class="content">
       <div class="a"></div>
       <div class="b"></div>
       这里面是一段文字效果
    <div class="clearfix"></div>
   </div>
   <style>
       .clearfix{
           clear:both;
       }
   </style>

2. 伪元素+clear

   .content:after{
       content: ‘‘;
       display: block;
       clear: both;
   }

3. BFC原理

   将content声明为BFC

   .content{
       overflow: hidden;
   }