在一个只有浮动元素的元素里,它的高度会是 0,如果想要它自适应即包含所有浮动元素,那需要清除它的子元素。一种方法叫做clearfix,即clear
一个不浮动的::after伪元素
.clearfix::after{
content:'';
display: block;
clear: both;
}
示例:
html:
<div class="father clearfix">
<div class="child left">左浮动</div>
<div class="child right">右浮动</div>
</div>
css:
.father {
width: 100%;
background-color: red;
}
.child {
width: 200px;
height: 200px;
background-color: green;
}
.left {
float: left;
}
.right {
float: right;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
效果: