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