使用float后清除浮动的几种方法

float 属性用于定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。所有主流浏览器都支持 float 属性。

注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

使用 float 属性后 元素会跳出当前区域，下面的元素会挤占上来，所以需要清除浮动，清除 float 浮动常用的方法有以下几种：

1、同辈元素清除浮动：clearfix

有以下两点需要注意：

1. 清除浮动元素本身不能为浮动元素;

2. 清除浮动的元素必须是块级元素;

HTML代码如下：

<ul>
    <li class="fl">li1</li>
    <li class="fl">li2</li>
    <li class="fl">li3</li>
    <li class="clearfix"></li>
</ul>

style部分代码，先设置浮动元素，给一个宽高和边框，方便观察：

.fl{
	float: left;
	border: 1px solid red;
	height: 80px;
	width: 500px;
}

清除浮动代码：

.clearfix{
    clear: both;
}

但是这个方法有一个缺点，会增加无意义的空标签。

2、父辈元素清除浮动，常用的方法有两种：

第一种：给父元素设置 overflow:hidden 或者 auto。

ul{
    padding: 0;
    border: 1px solid green;
    overflow: auto;
    /*overflow: hidden;*/
}

此方法也有一个缺点，就是 hidden 超出部分会隐藏，对SEO不太友好，auto超出部分会出现滚动条，影响美观。

第二种：使用伪元素清除浮动：before||after;

ul::after{
            content: '';/*必须要加的*/
            display: block;
            clear: both;
}

此方法比较常见，推荐使用。

未经允许不得转载：前端资源网 - w3h5 » 使用float后清除浮动的几种方法