鱼C论坛

 找回密码
 立即注册
查看: 2517|回复: 3

[庖丁解牛] 0 0 4 2 - 双飞图文混排 #番外篇 之BFC机制

[复制链接]
发表于 2017-2-5 11:11:08 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

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

41最后我们介绍了section::after,来清除浮动。
  1.         section::after{
  2.                         content: "";
  3.                         display: table;
  4.                         clear: both;
  5.                 }
复制代码


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

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

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

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

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

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

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

还有overflow:hidden也可以触发。

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

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

113931sed9d6dgwdvxsewg.png


我们可以为段落添加overflow
  1. p{
  2. overflow:hidden;
  3. }
复制代码

效果图:
Snip20170205_136.png


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

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

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

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


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


官方 Web 课程:

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

评分

参与人数 5荣誉 +25 鱼币 +20 贡献 +15 收起 理由
你在意在便在 + 5 + 5 + 3
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!
shishunfu + 5 + 5 + 3 感谢楼主无私奉献!
type_J + 5 + 5 + 3 感谢楼主无私奉献!
alltolove + 5 + 3 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-7-21 09:00:58 | 显示全部楼层
交作业!
042.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-1 10:33:48 | 显示全部楼层
上一章刚问,这一章就出来解答了。可真是太优秀有先见之明了~
路漫漫其修远兮~~ 记笔记  清除浮动
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-4 16:53:14 | 显示全部楼层
老师加油,我也加油
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 18:24

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表