[CSS]CSS浮动塌陷及解决办法
一. CSS浮动
先看一个例子
<html !DOCTYPE>
<head>
<title>HTML2</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="div-outer">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>页面如图所示![[CSS]CSS浮动塌陷及解决办法](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiZn-UnOGErEJMRMKSzKN9HWBaxxf6XI2SP2VbRP4l9VGs4sJBGfiYVeMCB5406NyYc.jpg "[CSS]CSS浮动塌陷及解决办法")
在div-outer内部的三个div默认每个div会占一行，所以三个div会成列显示。
现在对div1设置float: left，页面如图所示![[CSS]CSS浮动塌陷及解决办法](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiaY-VE0SnUV18ftBKHj00_uYPes0o1rrDbvkfx3G8ow9iHdCMbPKRf_4L8EkHI1Luc.jpg "[CSS]CSS浮动塌陷及解决办法")
可以看到div2和div3重合了。
对div1设置float: left属性，div1脱离文档流，但是仍占据位置，div2和div3重合是因为div2位置不变，div3也在div2的位置。但是发现这样理解是不对的，正确的理解是div2被div1挤到了现在div3的位置。
因为如果对div1设置float: right，页面如图所示![[CSS]CSS浮动塌陷及解决办法](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiZlJ6yusFHoGTliMsi-4wMGqgTZ5pKQOCigobjPKDJ78sgvp2ZehsGMSUhn6tW6drs.jpg "[CSS]CSS浮动塌陷及解决办法")
所以如果对div1设置float: left时，div2会被div1挤到现在div3的位置。
二. CSS浮动塌陷
如果对div1，div2，div3都设置float: left，但是父元素div-outer没有设置宽度和高度，页面如图所示![[CSS]CSS浮动塌陷及解决办法](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAibXa7E1C7u7xIL16gf7OJYUG8DNPtHhi2cBYlfGRHWwULjFc_OTU89lFre5HEx9yuo.jpg "[CSS]CSS浮动塌陷及解决办法")
如果没有设置父元素高度，父元素的高度默认是auto，会随子元素的高度而改变，如果对div1，div2，div3都设置float: left，那么此时父元素高度为0，这就是浮动塌陷。
三. 解决方法
1. 添加一个新的div
在div3下面添加一个宽度为0，高度为0，并且设置clear: both属性的空div。
.div4 {
clear: both;
}
<div class="div4"></div>页面如图所示![[CSS]CSS浮动塌陷及解决办法](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAibcYH5C_Ba8zFYYNdmxlmDUsaHp6FNhsJ-MhL4rgxMpbR_IkKAlCtv498aXXQ98RVs.jpg "[CSS]CSS浮动塌陷及解决办法")
父元素的高度可以显示了。
2. 设置父元素属性
对父元素设置属性overflow: hidden或overflow: auto，
.div-outer {
border: solid 2px #223344;
overflow: hidden;
}设置overflow: hidden的意思是，overflow规定当内容溢出元素框时发生的事情，![[CSS]CSS浮动塌陷及解决办法](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiZxjkXkTEbeaaz6IFf_AYa7TSLXukPJev1FwXk1DjomXIfl6n3Myr9UVhNyr2nGbvc.jpg "[CSS]CSS浮动塌陷及解决办法")
因为父元素没有指定高度，默认是auto，所以需要计算父元素包含的内容的高度，这样子元素浮动的高度就被计算进去，解决了浮动塌陷。
页面如图所示，
或者对父元素设置属性display: table，
.div-outer {
border: solid 2px #223344;
display: table;设置display: table的意思是，使父元素形成了BFC(Block Form Content)，
BFC有三个特性：
- 防止上下margin重叠
- 防止浮动元素重叠
- 防止浮动塌陷
overflow: hidden也形成了BFC，BFC会将子元素的浮动高度计算进去，解决浮动塌陷。
页面如图所示，![[CSS]CSS浮动塌陷及解决办法](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiZvWBx6kXY-i_YS4TmitviBIG92k3LYB3HqQOFxIrrRR8jl7ZXlrKPozUHdAULNtrE.jpg "[CSS]CSS浮动塌陷及解决办法")
不同之处在于设置属性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（第一种方法和第三种方法）。