分析 CSS 中的 BFC 和 IFC
前言
之前一直听到有人提到 CSS里的BFC,正巧在 IFE的练习里遇到了外边距折叠的问题,所以正好弄清楚BFC的机制。
一、 什么是 BFC
和之前所有博文一样,还是先从What的角度开始介绍,由浅入深的理解BFC。
所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。
它是页面中的一块渲染区域,并且有一套渲染规则. 它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
而 Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则。通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素,反之也如此。
BFC的布局规则如下: 1、内部的盒子会在垂直方向,一个个地放置; 2、 BFC是页面上的一个隔离的独立容器; 3、属于同一个BFC的两个相邻Box的上下margin会发生重叠 ;
4、 计算BFC的高度时,浮动元素也参与计算;
5、每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
6、 BFC的区域不会与float重叠;
那么如何触发 BFC呢?只要元素满足下面任一条件即可触发 BFC 特性:
- body 根元素;
- 浮动元素:float 不为none的属性值;
- 绝对定位元素:position (absolute、fixed)
- display为: inline-block、table-cells、flex
- overflow 除了visible以外的值 (hidden、auto、scroll)
二、 BFC的特性及应用
接下来介绍BFC常见的特性和应用,这一部分 在解释原因时,会用到上文的布局规则和触发条件,所以需要注意一下。
1、两个相邻的普通流中的块元素垂直方向上的 margin会折叠
效果图是:
根据BFC规则的第3条:
盒子垂直方向的距离由margin决定,属于同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。
上文的例子之所以发生外边距折叠,是因为他们同属于 body这个根元素,所以我们需要让 它们不属于同一个BFC,就能避免外边距折叠:
效果图是:
2、BFC可以包含浮动的元素(清除浮动)
正常情况下,浮动的元素会脱离普通文档流,所以下面的代码里:
外层的div会无法包含 内部浮动的div,效果见下图:
但如果我们 触发外部容器的BFC,根据BFC规范中的第4条:计算BFC的高度时,浮动元素也参与计算,那么外部div容器就可以包裹着浮动元素,所以只要把代码修改如下:
就可以完成以下效果:
3、BFC可以阻止元素被浮动元素覆盖
先看一个例子:
效果图是:
之所以是这样,是因为上文的规则5: 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
所以要想改变效果,使其互补干扰,就得利用规则6 :BFC的区域不会与float重叠,让 <div class="main"> 也能触发BFC的性质,即:
通过这种方法,就能用来实现两列的自适应布局。
三、简要介绍IFC
IFC布局规则:
1 框会从包含块的顶部开始,一个接一个地水平摆放。2 摆放这些框时,它们在水平方向的 内外边距+边框 所占用的空间都会被考虑; 在垂直方向上,这些框可能会以不同形式来对齐: 水平的margin、padding、border有效,垂直无效。不能指定宽高; 3 行框的宽度是由包含块和存在的浮动来决定; 行框的高度由行高来决定。
原文作者:ygming
原文链接:https://segmentfault.com/a/1190000012993668
上一篇: 组织关于 BFC 的活动
下一篇: BFC是什么?
推荐阅读
-
前端开发中的 CSS 命名规则和 BEM 实践
-
STL 中的 Priority_queue - 深入分析 C++ 中优先队列的实现原理、核心功能和基本机制。
-
[机器学习] 任务 6:分类算法(支持向量机 (SVM) 在线性可分和不可分数据中的应用及可视化分析)
-
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏-JavaFX历史## 跟java在服务器端和web端成绩相比,桌面一直是java的软肋,于是Sun公司在2008年推出JavaFX,弥补桌面软件的缺陷,请看下图JavaFX一路走过来的改进 从上图看出,一开始推出时候,开发者需使用一种名为JavaFX Script的静态的、声明式的编程语言来开发JavaFX应用程序。因为JavaFX Script将会被编译为Java bytecode,程序员可以使用Java代码代替。 JavaFX 2.0之后的版本摒弃了JavaFX Script语言,而作为一个Java API来使用。因此使用JavaFX平台实现的应用程序将直接通过标准Java代码来实现。 JavaFX 2.0 包含非常丰富的 UI 控件、图形和多媒体特性用于简化可视化应用的开发,WebView可直接在应用中嵌入网页;另外 2.0 版本允许使用 FXML 进行 UI 定义,这是一个脚本化基于 XML 的标识语言。 从JDK 7u6开始,JavaFx就与JDK捆绑在一起了,JavaFX团队称,下一个版本将是8.0,目前所有的工作都已经围绕8.0库进行。这是因为JavaFX将捆绑在Java 8中,因此该团队决定跳过几个版本号,迎头赶上Java 8。 ##JavaFx8的新特性 ## ###全新现代主题:Modena 新的Modena主题来替换原来的Caspian主题。不过在Application的start方法中,可以通过setUserAgentStylesheet(STYLESHEET_CASPIAN)来继续使用Caspian主题。 参考http://fxexperience.com/2013/03/modena-theme-update/ ###JavaFX 3D 在JavaFX8中提供了3D图像处理API,包括Shape3D (Box, Cylinder, MeshView, Sphere子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。Camera类也得到了更新。从JavaDoc中可以找到更多信息。 ###富文本 强化了富文本的支持 ###TreeTableView ###日期控件DatePicker 增加日期控件 ###用于 CSS 结构的公共 API
-
实现和简单分析java中的几种排序算法
-
对比分析kube-proxy中的ipvs和iptables的使用
-
CSS中的text-fill-color和text-stroke属性详解
-
如何在CSS和PS中创建出漂亮的金色渐变效果?
-
彻底搞懂CSS中的外边距和内填充
-
Python和R中多元线性回归的实证分析