CSS3 bfc 布局规则
BOX
- 概念：CSS 布局的基本单位
- 解释：BOX 是 CSS 布局的基本单位，元素的类型和 dispaly 属性，决定了这个元素的的 BOX 类型，BOX 的类型分为：
- 【block-level box】
- display 属性值为：block、list-item、table 的元素会生成 block-levle box，并且参与 block formatting context 布局
- 【inline-level box】
- display 属性值为：inline、inline-block、inline-table 的元素会生成 inline-level box，并参与 inline formatting context 布局
- 【run-in box】
- CSS3 中定义
- 【block-level box】
Formatting Context
- 概念：Formatting Context 【格式化上下文】
- 解释：它是一个决定如何渲染文档的容器，常见的 Formatting Context 如下：
- 【Block formatting context】(BFC)
- 【Inline formatting context】(IFC)
- 【Grid formatting context】(GFC)
- 【Flex formatting context】(FFC)
BFC
创建一个独立的渲染区域，并规定了 block-level box 如何布局，且与这个区域外部毫不相关
BFC 布局规则如下（注意 BFC 只影响块儿级盒)：
- 内部 Box 按垂直方向一个接一个的放置
- Box 垂直方向的距离由 margin 值决定，并且属于同一个 BFC 的两个相邻的 box 的 margin 值会重叠
- 每个元素的 margin-box 的左边与包含块儿 border-box 的左边相接触
- BFC 的区域不会与浮动盒子重叠
- BFC 就是一个隔绝的容器，容器里面的子元素不影响外面元素的布局，反之亦然
- 计算 BFC 的高度时，浮动元素也参与计算
以下 CSS 属性，将会触发 BFC：
- 根元素，即
<html> float属性值不为noneposition属性的值为absolute或fixedoverflow属性值不为visibledisplay属性值为inline-block,table-cell,table-caption
BFC 的应用
- 自适应两栏布局
- 利用的是 BFC 不与浮动元素重叠的特性
- 清楚浮动
- 利用 BFC 内浮动元素也参与 BFC 高度计算的特性
- 解决 margin 折叠（传递)
- 子元素的 margin-top 传递到父级
- 防止 margin 重叠
- 因为 BFC 内相邻元素的 margin 值会重叠，如果给其中一个元素包一层，并设置为 BFC，又因为 BFC 内子元素的布局与外部元素互不影响的特性，就可以解决重叠的问题
IE haslayout
IE 是个奇葩，自己搞一个叫做 haslayout 的东西，类似 BFC ，一般在 IE 中显示有问题的东西都可以通过触发 haslayout 来解决，触发方法有很多：
zoom属性设置为除normal以外的值width/height除auto以外的值float除none以外的值
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： JavaScript 函数
下一篇： WAF Bypass 介绍分析
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论