浮动元素导致的高度塌陷问题
- 相关定义与参考
-
几种比较好的解决方案
- 1. 设置overflow
- 2. 在浮动元素后添加兄弟元素
- 3. 使用after伪类（推荐）
- 4. 使用较新的标准display: flow-root - 兼容性问题
相关定义与参考
高度塌陷 (例子)
: 父元素包含子元素，当子元素设置为浮动且父元素高度为auto时，子元素会完全脱离文档流，父元素高度坍塌为0。
块格式上下文(Block Formatting Content)
: Thehtmlelement defines the initial Block Formatting Context (BFC) for your page. This means all the elements inside<html></html>lay themselves out according to Normal Flow following the rules for block and inline layout. Elements participating in a BFC use the rules outlined by the CSS Box Model, which defines how an element's margins, borders and padding interact with other blocks in the same context.
开启BFC的方法(MDN指定)
- floated elements
- absolutely positioned elements (including
position: fixedandposition: sticky
elements withdisplay: inline-block- table cells or elements with
display: table-cell, including anonymous table cells created when using thedisplay: table-*properties- table captions or elements with
display: table-caption- block elements where
overflowhas a value other than visibledisplay: flow-root- elements with contain: layout, content, or strict
- flex items
- grid items
- multicol containers
- elements with
column-span: all
几种比较好的解决方案
1. 设置overflow
给父元素设置overflow: hidden，这样可以开启BFC属性。(例子)
开启BFC方法
block elements whereoverflowhas a value other than visible
副作用
: 若父元素内有相对定位的元素，overflow: hidden会将其隐藏，不可视。
<!-- HTML -->
<div class="fatherbox">
<div class="childbox1"></div>
</div>
/* CSS */
.fatherbox {
border: 3px solid burlywood;
overflow: hidden;
}
.childbox1 {
width: 300px;
height: 300px;
background-color: #999;
float: left;
}
2. 在浮动元素后添加兄弟元素
给浮动元素添加兄弟元素，并设置clear: both，去除浮动元素对其影响。(例子)
开启BFC条件
elements with contain: layout, content, or strict
副作用
增加了一个空元素来装饰页面，违背了HTML用来布局的原则。
/* HTML */
<div class="fatherbox">
<div class="childbox1"></div>
<div class="childbox2"></div>
</div>
/* CSS */
.fatherbox {
border: 3px solid burlywood;
}
.childbox1 {
width: 300px;
height: 300px;
background-color: #999;
float: left;
}
.childbox2 {
clear: both;
}
3. 使用after伪类（推荐）
给父元素添加after伪类。(例子)
此方法与第一种方法的原理相同，都是使用兄弟元素的clear: both将上面兄弟元素的影响去除。
开启BFC条件
elements with contain: layout, content, or strict
<!-- HTML -->
<div class="fatherbox clearfix">
<div class="childbox1"></div>
</div>
/* CSS */
.fatherbox {
border: 3px solid burlywood;
}
.childbox1 {
width: 300px;
height: 300px;
background-color: #999;
float: left;
}
.clearfix::after {
/* 内容设置为空 */
content: "";
/* 应用clear清除浮动元素对当前元素的影响 */
clear: both;
/* 设置成块元素 */
display: block;
}
4. 使用较新的标准display: flow-root
直接对父元素设置display: flow-root(例子)
开启BFC条件
display: flow-root
副作用
只有最新版Chrome、Firefox、Opera浏览器实现了此标准。
<!-- HTML -->
<div class="fatherbox">
<div class="childbox1"></div>
</div>
/* CSS */
.fatherbox {
border: 3px solid burlywood;
display: flow-root;
}
.childbox1 {
width: 300px;
height: 300px;
background-color: #999;
float: left;
}
兼容性问题
若要兼容IE6，需设置zoom: 1。
总结
第一种方法兼容性最好，第三种方法对于IE8以下不支持，但其副作用最小，第四种方法浏览器支持性最差。
综合各个方案性能，得出终极方案是在第三种方法的基础上添加IE8以下支持，即(例子)：
<!-- HTML -->
<div class="fatherbox clearfix">
<div class="childbox1"></div>
</div>
/* CSS */
.fatherbox {
border: 3px solid burlywood;
}
.childbox1 {
width: 300px;
height: 300px;
background-color: #999;
float: left;
}
.clearfix {
zoom: 1;
}
.clearfix::after {
/* 内容设置为空 */
content: "";
/* 应用clear清除浮动元素对当前元素的影响 */
clear: both;
/* 设置成块元素 */
display: block;
}
