CSS 清除浮动的几种方法

CSS浮动 float 是一种很重要的网页布局方式，它能让我们的页面更灵活。但是也存在着一些问题，如：
1、失去了自动撑开父元素的特性，使父元素不能高度自适应。
2、浮动元素会影响 后面浮动元素的贴边效果！

通常一个父元素中的子元素使用 float 的时候，要么让子元素全部浮动，要么全都不浮动。这样可以避免很多混乱问题。

下面说一下CSS 清除浮动的几种方法：
1、给父元素设置固定的高度。
由于浮动的元素不会占据标准流的位置，所有无法把父元素的高度撑开。导致页面混乱。只要给父元素设置一个固定的高度，里面的浮动元素就能正常显示。

缺点：父元素高度不能自适应！
2、给父元素设置 clear ：both

缺点：父元素高度不能自适应！
3、隔墙法：
一、外墙法：在两个父盒子之间设置一个div隔开，div设置属性 clear：both

缺点：父元素高度不能自适应！
二、内墙法：在父元素内部设置 div，clear：both

几乎解决了浮动的所有问题！！！
优点：解决了浮动产生的贴边问题，高度不能自适应问题！
缺点：添加了没有语义的空标签，造成 HTML 结构冗余！

4、伪类法


5、给父元素添加 overflow：hidden 溢出隐藏。

overflow：hidden 生效的原因：利用了高度自适应机制！！

最后总结

清除浮动的方法有以上五种，但是通常使用比较多的清除浮动的方法一般是以下两种：
1、给父元素设置高度！（父元素高度固定的情况！）
2、overflow：hidden ！（父元素高度不确定，需要高度自适应的情况！）