关于清除浮动和闭合浮动的方式和原理

应学长的要求，正在对清浮动进行整理和理解。整理如下：

浮动的初衷是为了让文字（等行内元素）环绕在浮动元素的周围。

浮动带来的副作用（浮动让元素脱离文档流，使浮动元素在文档流里不占位置，即后边的元素（准确地说是块级元素）忽视浮动元素的存在）：

  ①子元素浮动带来父元素高度塌陷；

  ②块状元素，会钻进浮动元素的下面，被浮动元素所覆盖

 

清除浮动的方式：

    在浮动元素末尾插入空标签clear:both

有两种插入方法：1)<div style=”clear:both”></div>

2) <br clear=”all”/>

原理：当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性规定元素的哪一侧都不允许其他元素浮动），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。

缺点：页面中添加很多必要的又无意义的冗余元素，不符合语义化。

闭合浮动的方式：

①BFC（ie8+）、hasLayout（ie6、7）

    原理：BFC是一个独立的渲染区域，只有块级Box参与，规定了内部的块级Box如何布局，里面的子元素不会在布局上影响外面的元素，即是浮动元素与其他元素的交互限定区域。

    浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

  ②采用伪元素，给父元素追加clearfix类,使用：after（IE8+）

     

  （两种都可以，后面的更好）

  ③给父元素设置height（不建议使用）

  ④父元素设置浮动（不建议使用）

  ⑤父元素设置overflow:hidden/auto（会触发BFC）

  ⑥父元素设置display:table（会触发BFC）

  ⑦给子元素设置display:inline-block（触发BFC）

  . . . . . .

（关于清除浮动和闭合浮动的差别，请见前辈文http://www.iyunlu.com/view/css-xhtml/55.html那些年我们一起清除过的浮动）

可以感受到，BFC在闭合浮动里是起很重要的作用的。

关于BFC我会写在另一片文里，请转移！