html怎么将浮动塌陷消除,[CSS]CSS浮动塌陷及解决办法

一. CSS浮动

先看一个例子

HTML2

.div-outer {

border: solid 2px #223344;

}

.div1 {

width: 200px;

height: 100px;

border: solid 2px #667788;

}

.div2 {

width: 200px;

height: 100px;

border: solid 2px #667788;

}

.div3 {

width: 200px;

height: 100px;

border: solid 2px #667788;

}

div1

div2

div3

页面如图所示

在div-outer内部的三个div默认每个div会占一行，所以三个div会成列显示。

现在对div1设置float: left，页面如图所示

可以看到div2和div3重合了。

对div1设置float: left属性，div1脱离文档流，但是仍占据位置，div2和div3重合是因为div2位置不变，div3也在div2的位置。但是发现这样理解是不对的，正确的理解是div2被div1挤到了现在div3的位置。

因为如果对div1设置float: right，页面如图所示

所以如果对div1设置float: left时，div2会被div1挤到现在div3的位置。

二. CSS浮动塌陷

如果对div1，div2，div3都设置float: left，但是父元素div-outer没有设置宽度和高度，页面如图所示

如果没有设置父元素高度，父元素的高度默认是auto，会随子元素的高度而改变，如果对div1，div2，div3都设置float: left，那么此时父元素高度为0，这就是浮动塌陷。

三. 解决方法

1. 添加一个新的div

在div3下面添加一个宽度为0，高度为0，并且设置clear: both属性的空div。

.div4 {

clear: both;

}

页面如图所示

父元素的高度可以显示了。

2. 设置父元素属性

对父元素设置属性overflow: hidden或overflow: auto，

.div-outer {

border: solid 2px #223344;

overflow: hidden;

}

设置overflow: hidden的意思是，overflow规定当内容溢出元素框时发生的事情，

因为父元素没有指定高度，默认是auto，所以需要计算父元素包含的内容的高度，这样子元素浮动的高度就被计算进去，解决了浮动塌陷。

页面如图所示，

或者对父元素设置属性display: table，

.div-outer {

border: solid 2px #223344;

display: table;

设置display: table的意思是，使父元素形成了BFC(Block Form Content)，

BFC有三个特性：

防止上下margin重叠

防止浮动元素重叠

防止浮动塌陷

overflow: hidden也形成了BFC，BFC会将子元素的浮动高度计算进去，解决浮动塌陷。

页面如图所示，

不同之处在于设置属性overflow: hidden，父元素宽度会是100%，而设置属性display: table，父元素的宽度会随子元素变化，。

3. 内墙法

在父元素后面使用伪元素:after，

.div-outer:after{

display: block;

content: "";

height: 0;

clear: both;

}

这种方法的作用和第一种方法是相同的，只不过没有在div3后面再添加一个空的div，因为添加div会影响性能。

display: block;

content: "";

height: 0;

这就类似添加了一个空的div，然后设置属性clear: both。

总之，清除浮动塌陷就是对父元素设置属性使其形成BFC(第二种方法)，或者添加一个空的div(第一种方法和第三种方法)。