浮动 清除浮动的影响

标准流：元素按照本身的特性进行排列布局

浮动：元素脱离标准流，布局到左右位置

浮动

浮动后元素的特点：

1、浮动后的元素会怕漂浮在其他元素之上

2、浮动后的元素不占原来的位置

3、浮动后的两个元素会在同一行显示

4、浮动后的元素不会超出父元素的范围之内

5、浮动后的元素不会超出父元素的边框和内边距

6、浮动后的元素会有行内块元素的特点

7、浮动元素不会默认继承父元素宽度的100%

清除浮动

(1)、为什么要清除浮动

准确地说，并不是清除浮动，而是清除浮动后造成的影响

(2)、清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

(3) 、清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

1、额外标签法

W3C推荐的做法是通过在父元素里边末尾添加一个空的标签

浮动1 浮动2 这里添加空标签

例如

，或则其他标签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。

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

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

在父元素中使用before和after双伪元素清除浮动

4、双伪元素清除浮动

使用方法：

.clearfix::before,

.clearfix::after {

  content:""; 

clear:both;

 display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC后面讲 */

}

.clearfix {  

*zoom:1;

}

可以通过触发BFC的方式，可以实现清除浮动效果。(BFC后面讲Block formatting context，块级格式化上下文)

优点： 代码更简洁

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