清除浮動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>