浮动的概念作用特点产生浮动的原因和清除浮动的方法

一.浮动的概念：

什么是浮动(float)？
概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。
浮动float，CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

二.浮动的作用：

1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等.
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。
   语法： 选择器 {
   float: 属性值;
   }
   属性值：
   left 元素向左浮动。
   right 元素向右浮动。
   none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
   inherit 规定应该从父元素继承 float 属性的值。

三.浮动的特点：

四.产生浮动的原因：

1. 父级元素没有设置高度
2. 子集元素添加了float属性
   这个时候就影响下面的布局了，我们就该清除浮动了。

五.清除浮动的方法：

1.额外标签法（隔墙法）。
语法： 选择器 {
clear:both;
}
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差，造成结构的混乱，一般情况下不会使用这一种方式来清除浮动。
2.父级元素： overflow：属性；
语法： 选择器 {
overflow:属性值;
zoom: 1;
}
zoom1; 是在处理兼容性问题,加不加看自己/
属性值：
visible 默认值。内容不会被修剪（隐藏），会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
注意：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值。
优点：书写简单
缺点：溢出隐藏
3.父级元素after伪元素。
语法：选择器:after{
visibility:hidden;
clear:both;
}
.clearfix（上方选择器）{
zoom:1;
}
优点：语义结构化正确，主要推荐使用这种方法清除浮动
缺点：IE6-7不支持:after，兼容性问题。
4.父级双伪元素。
语法：
注意：.clearfix为选择器
.clearfix:before,.clearfix:after {
content: “”;
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}

优点：语义结构化正确
缺点：IE6-7不支持:after，兼容性问题。