问题产生的原因
在文档流中，父元素高度默认是被子元素撑开的，也就是说，子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素就会脱离文档流，此时就会导致子元素无法撑起父元素的高度，导致父元素出现高度塌陷的问题。
<style>
.box1 {
border: 1px solid deeppink;
}
.box2 {
width: 100px;
height: 100px;
background-color: deepskyblue;
float: left; /* 子元素浮动 */
}
.box3 {
height: 80px;
background-color: yellowgreen;
}
</style>
<body>
<div class="box1">
<div class="box2">子元素</div>
</div>
<div class="box3">
footer
</div>
</body>
子元素浮动前，布局正常
子元素浮动以后会脱离文档流
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面的布局混乱。
所以在开发中一定要避免出现高度塌陷的问题。
解决高度塌陷的原理
根据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
<style>
.box1 {
border: 1px solid deeppink;
width:1000px; /*在IE6中如果给父元素设置了宽度，则会默认开启 Has Layout*/
zoom:1; /* 兼容IE6 */
}
...
</style>
解决方案
- 我们可以将父元素的高度写死，以避免出现高度塌陷的问题，但是一旦高度写死，父元素的高度将不能适应子元素的高度，所以这种方案不推荐使用。
<style>
.box1 {
height: 200px; /* 将父元素的高度写死 */
border: 1px solid deeppink;
}
.box2 {
width: 100px;
height: 300px; /* 修改子元素的高度后父元素的高度将不能适应子元素的高度 */
background-color: deepskyblue;
float: left;
}
.box3 {
height: 80px;
background-color: yellowgreen;
}
</style>
<body>
<div class="box1">
<div class="box2">子元素</div>
</div>
<div class="box3">
footer
</div>
</body>
运行结果
- 如果设置了元素的浮动(开启BFC的第一种方式)
<style>
.box1 {
border: 1px solid deeppink;
float: left; /*设置父元素也浮动*/
}
...
</style>
让父元素也浮动的运行结果
- 设置父元素的
display属性值为inline-block
<style>
.box1 {
border: 1px solid deeppink;
display: inline-block; /*设置父元素的 display 为 inline-block */
}
...
</style>
设置元素的 display 属性为 inline-block 的运行结果
- 设置父元素的
overflow为非 visible的值
<style>
.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;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">子元素</div>
</div>
<div class="box3">
footer
</div>
</body>
完美解决
- 可以直接在高度塌陷的父元素的最后，添加一个空白的
div， 由于这个div并没有浮动，所以它是可以撑开父元素的高度，然后在对齐进行清除浮动。
这样可以通过这个空白的 div 来撑开父元素的高度。基本没有副作用。使用这种方法虽然可以解决问题，但是会在页面中添加多余的结构。
<style>
.box1 {
border: 1px solid deeppink;
}
.box2 {
width: 100px;
height: 100px;
background-color: deepskyblue;
float: left;
}
.clearFix{
/*清除其他元素浮动对当前元素所产生的影响*/
clear: both;
}
.box3 {
height: 80px;
background-color: yellowgreen;
}
</style>
<body>
<div class="box1">
<div class="box2">子元素</div>
<!-- 在这个位置添加一个空白的 div -->
<div class="clearFix"></div>
</div>
<div class="box3">
footer
</div>
</body>
清除浮动-运行结果图
- 可以通过
::after伪类向元素后添加一个空白的块元素，然后清除浮动，这样做和添加 div 的原理一样，可以达到相同的效果，而且不会在页面中添加多余的 div ，几乎没有副作用。
<style>
.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;
}
</style>
<body>
<div class="box1">
<div class="box2">子元素</div>
</div>
<div class="box3">
footer
</div>
</body>
通过添加 after 伪类 - 运行效果
完美解决高度塌陷的方案总结
-
设置父元素的
overflow为一个 非visible的值，hidden和auto都可以。 -
在父元素的最后位置添加一个空的
div标签，然后清除浮动。
清除浮动可以使用clear属性
该属性有 4 个可选值：
clear 属性的可选值
-
使用
::after伪类在父元素的最后添加一个空白的内容，然后设置display属性值为block然后再将其清除浮动。
网友评论