在底部添加元素来清除浮动的方式

问题

	<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;
	}
}