浮动元素会生成一个块级框，而不论它本身是何种元素。所有主流浏览器都支持 float 属性。
注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
使用 float 属性后 元素会跳出当前区域，下面的元素会挤占上来，所以需要清除浮动，清除 float 浮动常用的方法有以下几种：
1、同辈元素清除浮动：clearfix
有以下两点需要注意：
- 清除浮动元素本身不能为浮动元素;
- 清除浮动的元素必须是块级元素;
HTML代码如下：
代码语言：javascript复制<ul>
<li class="fl">li1</li>
<li class="fl">li2</li>
<li class="fl">li3</li>
<li class="clearfix"></li>
</ul>style部分代码，先设置浮动元素，给一个宽高和边框，方便观察：
代码语言：javascript复制.fl{
float: left;
border: 1px solid red;
height: 80px;
width: 500px;
}清除浮动代码：
代码语言：javascript复制.clearfix{
clear: both;
}但是这个方法有一个缺点，会增加无意义的空标签。
2、父辈元素清除浮动，常用的方法有两种：
第一种：给父元素设置 overflow:hidden 或者 auto。
代码语言：javascript复制ul{
padding: 0;
border: 1px solid green;
overflow: auto;
/*overflow: hidden;*/
}此方法也有一个缺点，就是 hidden 超出部分会隐藏，对SEO不太友好，auto超出部分会出现滚动条，影响美观。
第二种：使用伪元素清除浮动：before||after;
代码语言：javascript复制ul::after{
content: '';/*必须要加的*/
display: block;
clear: both;
}此方法比较常见，推荐使用。
