不二如是 发表于 2017-2-5 11:11:08

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

本帖最后由 不二如是 于 2021-8-11 09:28 编辑

在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机制，还很复杂，这里只列举了咱们遇到过的两个简单例子。

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

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

aswyamato1989 发表于 2017-7-21 09:00:58

交作业！

你在意在便在 发表于 2019-11-1 10:33:48

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

suweixuan1998 发表于 2020-1-4 16:53:14

{:10_254:}老师加油，我也加油
页: [1]
查看完整版本: 0 0 4 2 - 双飞图文混排 #番外篇 之BFC机制