CSS3中三种清除浮动（float）影响的方式

float是HTML中布局的一大关键，不少难题一旦用上float都能很愉快地解决。可是凡是好用的，也容易出错。好比当子元素都为float时，其父元素会受影响，或者偶尔会发现本身某个div的高度变成了0等等。

float的特性

1.文字环绕

文字环绕效果是很明显的，这里要注意一个地方:浮动的块虽然脱离的正常的文档流，可是还会占有正常文档流的文本空间，能够看到上面第二种图，p的区域实际上是顶到了img的底下的，由于float让img脱离文档流，可是p上的文字却没有顶过去，也就是说p上的一部分文字空间仍然被img占据着，因此从这里也能够看出float的脱离文档流不是彻底脱离。

2.包裹性

所谓的包裹性是指，使用float的元素会自动加上一个块级框，也就是能够像块级元素那样设置宽高

float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素。

正是因为这个破坏性，为了布局能正常布局，常常须要清除浮动。清除浮动并非清理自身的浮动的效果，而是清理上面接触到的浮动元素的浮动，使浮动元素后面的元素不接受它们的浮动，按照正常的元素流进行布局。

下面介绍清除浮动的三个方式：

1.增长一个空的标签（div 或 br等都行），经过clear：both语句消除float对后面元素的影响。

<div class="main_left">.main{float:left;}</div>
<div class="side_left">.side{float:right;}</div>
<!--增长一个空标签-->
<div style="clear:both;"></div>
<div class="footer">.footer</div>

缺点：须要加不少无心义的标签，对后期维护不利。若是是小程序，那不要紧，但若是是大工程，仍是慎用。

2.使用:after 伪元素

.clearIt { zoom:1; }
.clearIt:before;  
 /*加上before能够防止浏览器顶部的空白崩溃（就是上一个div的margin-bottom和下边的margin-top会发生叠加）*/
 .clearIt:after {
    content:".";
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; 
}
/*
display:block 使生成的元素以块级元素显示,占满剩余空间;
height:0 避免生成内容破坏原有布局的高度。
visibility:hidden 使生成的内容不可见，并容许可能被生成内容盖住的内容能够进行点击和交互;
经过 content:"."生成内容做为最后一个元素，至于content里面是点仍是其余都是能够的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
有些版本可能content 里面内容为空,一丝冰凉是不推荐这样作的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
zoom：1 触发IE hasLayout。
*/

3.在父元素设置 overflow：auto

<!--为父元素设置overflow-->
<div class="wrap"  style="overflow:auto;">
<div class="wrap_main_left">.main{float:left;}</div>
<div class="wrap_side_left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

当父元素设置了overflow：auto以后，内容元素会被修剪，超出元素不可见。

这种方式的优势是不存在结构和语义化问题，代码量极少。但缺点也很严重，当内容增多时容易由于不会自动换行而致使内容被隐藏掉，没法显示须要溢出的元素。

其实只有clear：both是用来消除float的影响。其它的几种方式都是经过隐藏内容来达到本身的目的。

参照：https://blog.csdn.net/qq_22855325/article/details/78015502