《CSS世界》注4：流保护与销毁

上一篇：《CSS世界》注3：内联元素与对齐下一篇：《CSS世界》注5：CSS层叠规则与元素隐藏虽说是“浮动与定位”，但内容《CSS世界》的第6章不仅包含了浮动定位，而且很大一部分文字都是在讲BFC和overflow。更吸引人的是，作者将float/absolute/relative描述为“魔界三兄弟”，将原本枯燥乏味的理论知识变成了玄幻小说。absolute和float可以看作是“同父异母”的兄弟关系。他们的父亲是同一个人，CSS界的大魔王，属于魔界；但是他们的妈妈不是一个人，absolute的妈妈是魔界的，float的妈妈是人界的。如果说float和absolute是同父异母的兄弟，那么relative就是absolute的哥哥。当年，MadonnaPosition生了好几个儿子。其中之一就是绝对，非常强大和霸道。考虑到Absolute以后会麻烦Float去普通世界，以他的个性和霸道的能力，肯定会影响普通流媒体世界的秩序，所以处女位让她心地善良的大儿子Relative直接住在了正常的流媒体世界，帮忙盯紧绝对，别让那个叫绝对的小恶魔到处惹事。一、浮动float和BFC1。1Floating浮动的本质：实现文字环绕的效果目前一般使用浮动来实现框的水平显示（左右栏布局），但往往会造成父框的折叠浮动元素；那么如何去除浮动的影响呢？网上随便百度一下清除浮动的方法：在父元素上设置overflow属性清除浮动，使用extra标签的方法清除伪元素。就是防止自己和之前的浮动元素相邻，从而达到清除浮动元素的效果。示例如下：/*ul>li*7*/li{width:20px;高度：20px；背景色：#ccc；边距：5px；float:left;}li:nth-of-type(3){clear:both;}结果如下：“在父元素上设置溢出属性”的方法是利用BFC的特性（将下面详细解释）1.2BoundaryBFCBFC的全称是blockformattingcontext，中文是“块格式化上下文”。与之对应的还有IFC，即inlineformattingcontext，中文就是“行内格式化上下行”。因此，BFC元素不可能重叠margin，因为margin重叠会影响到外面的元素；BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动时父元素的高度会塌陷，势必会影响后面元素的布局和定位，这显然违反了BFC。元素的子元素不会影响外部元素的设置。如何触发BFC：根元素中float的值不是noneoverflowauto、scroll或hiddendisplay的值table-cell、table-caption、inline-block中任意位置的值不是relative和static.因此：只要满足以上任意一项（触发BFC），元素就不会出现margin重叠和float带来的“高度”“塌陷”的问题张Dablabla用了很多篇幅对比了各种实现方式BFC，最后得出一个结论：overflow:hidden是最理想的BFC触发方式，副作用最小1.3float+BFC实现健壮的两列布局我是帅哥，好巧，我也是帅哥，所以看这篇博文的都是帅哥~