html 清除浮动的方法,浅谈 CSS 清除浮动的 6 种方法

额外标签法

使用:after 伪元素

给父元素定高

利用overflow:hidden;属性

父元素浮动

父元素处于绝对定位

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

引出问题：

.outer{

border: 1px solid black;

width:300px;

}

.inner{

width: 50px;

height: 50px;

background-color: #ff4400;

margin-right: 20px;

float: left;

}

.footer{

background-color: #005FC3;

width: 200px;

height: 100px;

}

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

解决办法：

1. 使用额外标签法

.outer{

border: 1px solid black;

width: 300px;

}

.inner{

width: 50px;

height: 50px;

background-color: #ff4400;

margin-right: 20px;

float: left;

}

.footer{

background-color: #005FC3;

width: 200px;

height: 100px;

}

.clearfix{

clear: both;

}

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

2. 使用 :after 为元素

.outer{

border: 1px solid black;

width: 300px;

}

.inner{

width: 50px;

height: 50px;

background-color: #ff4400;

margin-right: 20px;

float: left;

}

.footer{

background-color: #005FC3;

width: 200px;

height: 100px;

}

.clearfix:after{ /*最简方式*/

content: '';

display: block;

clear: both;

}

/* 新浪使用方式

.clearfix:after{

content: '';

display: block;

clear: both;

height: 0;

visibility: hidden;

}

*/

.clearfix{ /*兼容 IE*/

zoom: 1;

}

3. 给父元素定高

.outer{

border: 1px solid black;

width: 300px;

height: 50px;

}

.inner{

width: 50px;

height: 50px;

background-color: #ff4400;

margin-right: 20px;

float: left;

}

.footer{

background-color: #005FC3;

width: 200px;

height: 100px;

}

4. 利用 overflow:hidden 属性

.outer{

border: 1px solid black;

width: 300px;

overflow: hidden;

zoom: 1;/*兼容 IE*/

}

.inner{

width: 50px;

height: 50px;

background-color: #ff4400;

margin-right: 20px;

float: left;

}

.footer{

background-color: #005FC3;

width: 200px;

height: 100px;

}

5. 父元素浮动

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

.outer{

border: 1px solid black;

width: 300px;

float: left;

}

.inner{

width: 50px;

height: 50px;

background-color: #ff4400;

margin-right: 20px;

float: left;

}

.footer{

background-color: #005FC3;

width: 200px;

height: 100px;

}

可以看出虽然 outer DIV 消除了塌陷现象，但由于其也发生了浮动故，其后元素若处于正常文档流，会被跌在底下。

如果要解决可以参考前面的办法。

例如：

.outer{

border: 1px solid black;

width: 300px;

float: left;

}

.inner{

width: 50px;

height: 50px;

background-color: #ff4400;

margin-right: 20px;

float: left;

}

.footer{

background-color: #005FC3;

width: 200px;

height: 100px;

}

.clearfix:after{

content: "";

display: block;

clear: both;

}

.clearfix{

zoom: 1;

}

6. 父元素处于绝对定位

.outer{

border: 1px solid black;

width: 300px;

position: absolute;

}

.inner{

width: 50px;

height: 50px;

background-color: #ff4400;

margin-right: 20px;

float: left;

}

.footer{

background-color: #005FC3;

width: 200px;

height: 100px;

}

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