0 0 4 2 - 双飞图文混排 #番外篇 之BFC机制

不二如是

在41最后我们介绍了section::after，来清除浮动。

        section::after{
                        content: "";
                        display: table;
                        clear: both;
                }

将display设置为table，clear为both，是为了使清除浮动浮动的时候形成一种名为BFC的机制。

BFC是Block Format Content的简写，即，块级格式化上下文。

BFC的最显著的效果就是建立一个隔离的空间，断绝空间内外元素间相互的作用。

在BFC中，元素不不会受外界的影响。

我们往往利用该特性来清除浮动元素对其他浮动元素带来的‘塌崩’影响。

此外，在BFC中，块状元素与行内元素组成的‘行盒子’会垂直的沿其父元素的边框排列。

触发BFC的因素很多，上面的设置display为‘table’就可以。

还有overflow：hidden也可以触发。

拿咱们在37设置图文混排为例。

当为图片设置左浮动时，可以看到段落中的文字是环绕图片排列的，如图

我们可以为段落添加overflow

p{
overflow:hidden;
}

效果图：

出发BFC机制后，可以看到文字不再环绕图片了。

这样就清楚了img浮动对段落元素的影响。

BFC机制，还很复杂，这里只列举了咱们遇到过的两个简单例子。

还有很大一片天地，任你遨游，欲知详情，请自行百度，欢迎交流～

这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅 ）

官方 Web 课程：

aswyamato1989

交作业！

你在意在便在

上一章刚问，这一章就出来解答了。可真是太优秀有先见之明了~
路漫漫其修远兮~~ 记笔记  清除浮动

suweixuan1998

老师加油，我也加油