清除浮动float的影响

1. 使用clearfix清除浮动

.float {
	float: left;
}

.clearfix{
	clear: both;
}

<main>
	<div class="float"></div>
	<div class="float"></div>
	<div class="clearfix"></div>
</main>

2. 使用After伪元素清除浮动

.float {
	float: left;
}

main::after {
	content: ""
	clear: both;
	display: block;
}

<main>
	<div class="float"></div>
	<div class="float"></div>
	<div class="clearfix"></div>
</main>

3. Overflow触发BFC清除浮动

.float {
	float: left;
}

main {
	overflow: hidden;
	/*overflow: auto; 也可以*/
}

<main>
	<div class="float"></div>
	<div class="float"></div>
	<div class="clearfix"></div>
</main>