浅谈 CSS 清除浮动的6种方法_html/css_WEB-ITnose

额外标签法

使用:after 伪元素

给父元素定高

利用overflow:hidden;属性

父元素浮动

父元素处于绝对定位

在开发网页的时候经常需要用到各种浮动，此时便需要及时的清除浮动，否则将会导致布局出现问题

引出问题：

可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上写边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下

解决办法：

1.使用额外标签发

这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美

2.使用:after 为元素

3.给父元素定高

4.利用 overflow:hidden 属性

5.父元素浮动

当父元素浮动的时候，无需为子元素的浮动清除浮动,布局时经常用到

可以看出虽然 outer DIV 消除了塌陷现象，但由于其也发生了浮动故，其后元素若无处于正常文档流，会被跌在底下。
如果要解决可以参考前面的办法。

例如：

6.父元素处于绝对定位

与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。