css清除浮动的三种方法

什么是清除浮动？

当给元素设置了float属性时，元素就脱离了文档流，对后面的元素就产生了影响。比如说，块元素会跟进过来，导致被遮蔽；文字元素会围绕着浮动元素。导致页面混乱，这个时候，我们会清除浮动。也就是让后面的元素回到正常的文档流中区。

常用的有三种方法：

三种方法

一、clear:both

这种方法需要在浮动元素的后面新建一个div，然后让这个div的具有clear:both属性。
比如：
为了方便理解，我用行内样式。

<div style="float:left;">左边<div>
<div style="float:left;">右边<div>
<!-- 下面的代码专门用来清除浮动，使得之后的元素回归正常文档流 -->
<div style="clear:both;"><div>

好处：好理解；
坏处：需要增加额外标签，破坏html语义结构。

二、overflow:hidden

这种方法是在父元素中设置overflow属性。
比如：

<div style="overflow:hidden;">
	<div style="float:left;">左边<div>
	<div style="float:left;">右边<div>
<div>

好处：不用添加额外标签，简单易用。
坏处：超出范围的会被隐藏，埋下隐患。也不容易联想到这种方法。

三、::after伪元素

推荐方法
操作逻辑是使用伪类，结合了上两种方法

<style>

	.clearfix::after{
		clear:both;
		content:"";
		display:block;
		height:0;
		visibility:hidden;
}
</style>


<div class="clearfix">
	<div style="float:left;">左边<div>
	<div style="float:left;">右边<div>
<div>