CSS清除浮动的方法和理解

看了一些小伙伴的页面，常常因为使用了浮动而没有进行浮动的清除，造成了页面布局的混乱。今天来谈谈浮动的四种方法及其原理。当你掌握了原理之后，你就会发现，清除浮动的方法本质都是一样的，这时你就可以根据自己的场景和需求，很灵活的发展适合的浮动方法了，不需要再死记硬背了！！
好了，废话不多说了！！下面一起来看看四种常见的清除浮动的方法。

一、为什么要清除浮动？

在讲清除浮动方法之前，我们来看看为什么要清除浮动。
我们知道，元素浮动后就会脱离文档流，即浮动框不属于文档流中普通流。
当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。
父级元素无法自动获得高度，当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

二、清除浮动的四种方法

1、给浮动的元素的祖先元素加上高度。如果一个元素要浮动,那么它的祖先元素一定是要有高度高度的盒子,才能关住浮动。

.box {
      height:300px;
 }
.left{
    background-color: #0f0;
     height: 300px;
     width: 200px;
     float: left;
  }
  <div class="box">
      <div class="left"></div>
  </div>

**原理：**我们知道，如果父级元素没有定义高度，父元素的高度是由子元素撑开，当给父级元素加上高度，就解决了父级div无法自动获取到高度二造成的高度塌陷问题。
**优点：**简单、代码少、容易理解和掌握。
**缺点：**在进行页面布局时，通常盒子的高度我们是不写死的，因为对响应式会有很大的影响。这种方法只适合高度固定的布局，需要很精确的高度。

2、使用空标签进行清除和clear属性进行清除。
即在浮动盒子里加入和浮动元素同级的空标签，并且赋予clear属性。

.clear {
    clear:both;
 }
.left{
    background-color: #0f0;
    height: 300px;
    width: 200px;
    float: left;
}
<div class="box" >
	<div class="left" > </div >
	<div class="left" > </div >
	<div class="clear" > </div >
</div >

**原理：**关于clear，根据w3c的官方解释是【元素盒子的边不能和前面的浮动元素相邻】。意思就是说clear定义了哪条边上不允许出现浮动元素。添加一个空div，clear:both清除周围浮动的元素，让父级div能自动获取到高度。
**优点：**比较简单、代码量不多、并且浏览器支持很好好、不容易出现第一种方法的。
**缺点：**增加了没有意义的空标签，造成页面结构比较混乱，给页面优化增加困难。

3、伪元素清除浮动。
即给父级元素使用 伪元素和zoom属性。

  .box:after {
      display: block;
      clear: both;
      content: "";
      overflow: hidden;
      height: 0;
  }
 .box {
	 zoom：1；
  }
  .left {
      background-color: #0f0;
      height: 300px;
      width: 200px;
      float: left;
   }
  <div class="box" >
  	<div class="left" > </div >
  </div >

原理：父级元素生成伪元素相当于代替了方法2中的div空标签，原理是相同的，但是IE8以下的浏览器不支持after伪元素，所以使用了zoom属性解决ie6,ie7浮动问题，zoom是ie专用的属性。
优点：通过了zoom解决了浏览器的兼容性问题，符合良好的也买你结构，不容易出现问题，写法比较固定的，即使是不理解也可以直接复制使用。
缺点：对于初学者比较难理解，css代码多，要两句代码结合使用才能让主流浏览器都支持。

博主推荐使用最后一种伪元素清除浮动哦~~~~
有问题的道友欢迎留言，或者联系博主。