高度塌陷
当父元素高度自适应时,其子元素浮动后,父元素的高度会变成0
解决方案
<div class="div1">
<div class="div2"><div>
</div>
- 指定父元素高度
.div1{
height: 100px;
border: 10px solid black;
}
.div2{
height: 50px;
width: 50px;
background-color: red;
float: left;
}
- 开启BFC(块级格式化上下文)
开启BFC的特点:
a. 父元素的垂直外边距不会和子元素重叠
b. 开启BFC的元素不会被浮动元素所覆盖
c. 开启BFC的元素可以包含浮动的子元素
开启BFC的方式:
a. 设置父元素浮动
.div1{
border: 10px solid black;
float: left;
}
b. 设置元素绝对定位
.div1{
border: 10px solid black;
position: absolute/fixed;
}
c. 设置父元素为行内块元素
.div1{
border: 10px solid black;
display: inline-block;
}
d. 设置父元素的overflow值为非visible
.div1{
border: 10px solid black;
overflow: hidden;
}
- 添加空白元素
.div1::after{
content: "";
display: table;
clear: both;
}
IE6及以下
IE6及以下浏览器不支持BFC,使用hasLayout属性
.div1{
zoom: 1;
}
总结
将高度塌陷和垂直外边距重叠的问题一起解决的方案如下
.clearfix{
zoom:1;
}
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}