问题
<div class="box">
<div class="leftbox"></div>
<div class="rightbox"></div>
</div>
如果给leftbox和rightbox添加上宽高与浮动的话,box盒子无法被撑开。
在尾部添加一个没有尺寸的空元素
<div class="box">
<div class="leftbox"></div>
<div class="rightbox"></div>
<div class="clearfix"></div>
</div>
.box {
padding: 10px;
border: 1px solid black;
.leftbox {
width: 100px;
height: 100px;
float: left;
background-color: cadetblue;
}
.rightbox {
width: 100px;
height: 100px;
float: right;
background-color: darkcyan;
}
.clearfix {
clear: both;
}
}
使用伪元素选择器在底部添加空块元素
<div class="box">
<div class="leftbox"></div>
<div class="rightbox"></div>
</div>
.box {
padding: 10px;
border: 1px solid black;
.leftbox {
width: 100px;
height: 100px;
float: left;
background-color: cadetblue;
}
.rightbox {
width: 100px;
height: 100px;
float: right;
background-color: darkcyan;
}
&::after {
content: '';
display: block;
clear: both;
}
}