CSS 清除浮动

企业级应用中清除浮动的最佳方法

clearfix 方案

• 使用伪元素after在父元素尾部添加一个元素, 省掉了一个标签了
• 对新增的伪元素应用清楚浮动的样式
• 必备的三大样式： content、clear、display
• 可选的三大样式：height、font-size、visibility

样式块

.clearfix:after {
	content: "";
	clear: "";
	dispay: block;
}
// 更完美的写法
.clearfix:after {
	content: "";
	clear: "";
	dispay: block;
	height: 0px;
	font-size: 0px;
	visibility: hidden;
}

<div class="clearfix">
	<div style="float:left;">浮动的元素</div>
	<div style="float:right;">浮动的元素</div>
</div>

其实这个用法很早就在用了，但是一直都是拷贝，今天在华为云上的视频又顺便理解一下，非常好，记录一下，华为云PPT截图如下：