问题产生的原因
在文档流中，父元素高度默认是被子元素撑开的，也就是说，子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素就会脱离文档流，此时就会导致子元素无法撑起父元素的高度，导致父元素出现高度塌陷的问题。
.box1 {
border: 1px solid deeppink;
}
.box2 {
width: 100px;
height: 100px;
background-color: deepskyblue;
float: left; /* 子元素浮动 */
}
.box3 {
height: 80px;
background-color: yellowgreen;
}
footer
子元素浮动前，布局正常
子元素浮动以后会脱离文档流
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面的布局混乱。
所以在开发中一定要避免出现高度塌陷的问题。
解决高度塌陷的原理
根据W3C的标准，在页面中，元素都有一个 隐含的属性。 Block Formatting Context ，简称(BFC) ,该属性可以设置打开或者关闭，默认是关闭的。
开启元素的BFC以后，元素将会具有如下特性。
父元素的垂直外边距不会跟子元素重叠。
开启BFC的元素不会被浮动元素所覆盖。
开启BFC的元素可以包含浮动的子元素。
如何开启元素的BFC
设置元素的浮动
-- 使用这种方式虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也对导致下边的的元素上移，不能解决问题。
设置元素绝对定位(和设置元素的浮动效果一样，所以也不推荐使用)
设置元素的 display 属性的值为 inline-block
-- 可以解决问题，但是也会导致宽度丢失，也不推荐使用这种方式。
将元素的 overflow 设置为 非visible 的值。
-- 推荐方式 将 overflow 设置为 hidden 或 auto 是一种副作用最小的开启 BFC 的方式。
兼容IE6及以下浏览器
但是在 IE6及以下的浏览器中不支持 BFC，所以使用这种方式不能兼容 IE6
在IE6中虽然没有 BFC ，但是却有另外一个隐含的值 Has Layout，该属性的作用和BFC类似，所以在IE6浏览器中可以开启Has Layout 来解决该问题。
开启Has Layout的方式有很多，我们直接使用一种副作用最小的，将元素的 zoom 属性设置为 1 即可开启 Has Layout
在IE6中如果给父元素设置了宽度，则会默认开启 Has Layout
.box1 {
border: 1px solid deeppink;
width:1000px; /*在IE6中如果给父元素设置了宽度，则会默认开启 Has Layout*/
zoom:1; /* 兼容IE6 */
}
...
解决方案
我们可以将父元素的高度写死，以避免出现高度塌陷的问题，但是一旦高度写死，父元素的高度将不能适应子元素的高度，所以这种方案不推荐使用。
.box1 {
height: 200px; /* 将父元素的高度写死 */
border: 1px solid deeppink;
}
.box2 {
width: 100px;
height: 300px; /* 修改子元素的高度后父元素的高度将不能适应子元素的高度 */
background-color: deepskyblue;
float: left;
}
.box3 {
height: 80px;
background-color: yellowgreen;
}
footer
运行结果
如果设置了元素的浮动(开启BFC的第一种方式)
.box1 {
border: 1px solid deeppink;
float: left; /*设置父元素也浮动*/
}
...
让父元素也浮动的运行结果
设置父元素的 display 属性值为 inline-block
.box1 {
border: 1px solid deeppink;
display: inline-block; /*设置父元素的 display 为 inline-block */
}
...
设置元素的 display 属性为 inline-block 的运行结果
设置父元素的 overflow 为 非 visible 的值
.box1 {
border: 1px solid deeppink;
/* overflow: auto; */ /*设置auto也可以*/
overflow: hidden; /* 设置 hidden 也可以 */
}
.box2 {
width: 100px;
height: 100px;
background-color: deepskyblue;
float: left;
}
.box3 {
height: 80px;
background-color: yellowgreen;
}
footer
完美解决
可以直接在高度塌陷的父元素的最后，添加一个空白的 div ， 由于这个 div 并没有浮动，所以它是可以撑开父元素的高度，然后在对齐进行清除浮动。
这样可以通过这个空白的 div 来撑开父元素的高度。基本没有副作用。使用这种方法虽然可以解决问题，但是会在页面中添加多余的结构。
.box1 {
border: 1px solid deeppink;
}
.box2 {
width: 100px;
height: 100px;
background-color: deepskyblue;
float: left;
}
.clearFix{
/*清除其他元素浮动对当前元素所产生的影响*/
clear: both;
}
.box3 {
height: 80px;
background-color: yellowgreen;
}
footer
清除浮动-运行结果图
可以通过 ::after 伪类向元素后添加一个空白的块元素，然后清除浮动，这样做和添加 div 的原理一样，可以达到相同的效果，而且不会在页面中添加多余的 div ，几乎没有副作用。
.box1 {
border: 1px solid deeppink;
}
/*通过 after 伪类来设置一个空的元素 */
.box1::after{
content: ""; /*内容为空*/
display: block; /* 设置为块级元素 */
clear: both; /* 清除浮动 */
}
.box2 {
width: 100px;
height: 100px;
background-color: deepskyblue;
float: left;
}
.box3 {
height: 80px;
background-color: yellowgreen;
}
footer
通过添加 after 伪类 - 运行效果
完美解决高度塌陷的方案总结
设置父元素的 overflow 为一个 非 visible 的值，hidden 和 auto 都可以。
在父元素的最后位置添加一个空的 div 标签，然后清除浮动。
清除浮动可以使用 clear 属性
该属性有 4 个可选值：
clear 属性的可选值
使用 ::after伪类在父元素的最后添加一个空白的内容，然后设置 display 属性值为 block 然后再将其清除浮动。
这三种方式最推荐使用第三种方式！
扫一扫
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
