一、为什么需要浮动

    因为行内块有自己的缺陷：1.它可以实现多个元素一行显示，但是中间会有空白缝隙。2.它不能实现盒子左右对齐。

二、什么是浮动

    概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置。

    作用：让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。可以实现盒子的左右对齐等等。浮动最早是用来控制图片，实现文字环绕图片的效果。三、浮动的特点

    1、浮：加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。

    2、漏：加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。

    3、特：特别注意：浮动元素会改变display属性，类似转换为了行内块但是元素之间没有空白缝隙。

四、浮动的扩展1、浮动元素与父盒子的关系子盒子的浮动参照父盒子对齐，不会与父盒子的边框重叠，也不会超过父盒子的内边距。2、浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐；普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

（注意：浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

建议：如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题）

五、清除浮动（一）为什么需要清除浮动

    因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子（准确地说，并不是清除浮动，而是清除浮动后造成的影响）。

（二）清除浮动本质

    清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

（四）清除浮动的方法1、额外标签法(隔墙法)

这个是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化较差。

2、父级添加overflow属性方法

    可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3、使用after伪元素清除浮动

（:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了。现在一般都用双冒号“：：”用于区别伪类标签。）

其使用方法：.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点：符合闭合浮动思想 结构语义化正确。

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 百度、淘宝网、网易等

4、使用双伪元素清除浮动

使用方法：.clearfix:before,

.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom:1;

}

优点：代码更简洁。

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站：小米、腾讯等。

六、什么时候用清除浮动

1、父级没高度。

2、子盒子浮动了。

3、影响下面布局了，我们就应该清除浮动了。

一、为什么需要浮动

    因为行内块有自己的缺陷：1.它可以实现多个元素一行显示，但是中间会有空白缝隙。2.它不能实现盒子左右对齐。

二、什么是浮动

    概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置。

    作用：让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。可以实现盒子的左右对齐等等。浮动最早是用来控制图片，实现文字环绕图片的效果。三、浮动的特点

    1、浮：加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。

    2、漏：加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。

    3、特：特别注意：浮动元素会改变display属性，类似转换为了行内块但是元素之间没有空白缝隙。

四、浮动的扩展1、浮动元素与父盒子的关系子盒子的浮动参照父盒子对齐，不会与父盒子的边框重叠，也不会超过父盒子的内边距。2、浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐；普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

（注意：浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

建议：如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题）

五、清除浮动（一）为什么需要清除浮动

    因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子（准确地说，并不是清除浮动，而是清除浮动后造成的影响）。

（二）清除浮动本质

    清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

（四）清除浮动的方法1、额外标签法(隔墙法)

这个是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化较差。

2、父级添加overflow属性方法

    可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3、使用after伪元素清除浮动

（:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了。现在一般都用双冒号“：：”用于区别伪类标签。）

其使用方法：.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点：符合闭合浮动思想 结构语义化正确。

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 百度、淘宝网、网易等

4、使用双伪元素清除浮动

使用方法：.clearfix:before,

.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom:1;

}

优点：代码更简洁。

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站：小米、腾讯等。

六、什么时候用清除浮动

1、父级没高度。

2、子盒子浮动了。

3、影响下面布局了，我们就应该清除浮动了。