CSS BFC原理及其应用

BFC – Block Formatting Context 直译是–块级格式化上下文它是一个独立渲染区域只有Block-level box参与它规定了内部如何布局并且与这个区域外部毫不相干

解释 BFC 之前先理解 Box Formatting Context的概念
Box–css布局的基本单位
直观来说就是一个页面由很多个box组成的元素的类型和display属性决定了这个box的类型不同类型的box 会参与不同的formatting context(一个决定如何渲染文档的容器) 因此box内的元素会以不同的方式渲染让我们看看有哪些盒子:
– block-level box:display属性为block list-item table的元素会生成block-level box 并参与block formatting conext
– inline-level box:display属性为inline inline-block inline-table的元素会生成inline-level box 并参与 inline formatting context
– run-in box 是一个块/行内元素混合可以使某些块级元素成为下一个元素的行内部分

Formatting Context
是W3C css2 规范中的一个概念它是页面中的一块渲染区域并且有一套渲染规则它决定了其子元素将如何定位以及和其他元素的关系和相互作用最常见formatting context有block formatting context(简称BFC)和inline formatting context(简称IFC)
BFC是一个独立的布局环境其中的元素布局是不受外界的影响并且在一个BFC中块盒与行盒都会垂直的沿着其父元素的边框排列

BFC的布局规则
–内部的box会在垂直方向一个接一个地放置
–box垂直方向的距离由margin决定属于同一个BFC的两个相邻box的margin会发生重叠
–每个盒子的margin box的左边与包含border box的左边相接触(对于从左往右的格式化否则相反) 即使存在浮动也是如此
–BFC的区域不会与float box重叠
–BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素反之也是如此
–计算BFC的高度时浮动元素也参与计算

如何创建BFC
–float的值不是none
–position的值不是static或者relative
–display的值是inline-block table-cell flex table-caption或者inline-flex
–overflow的值不是visible

BFC的作用

利用bfc避免margin重叠
例子

页面的生成效果如下
CSS BFC原理及其应用

根据第二条属于同一个bfc的两个相邻的box会发生margin重叠所以可以设置两个不同的bfc 也就是把第二个p用div包起来然后**它使其成为一个bfc
CSS BFC原理及其应用

页面生成效果如下很明显距离明显拉开了
CSS BFC原理及其应用

2. 自适应两栏布局
根据bfc的第三个规则:每个盒子的margin box的左边也包含快border box的左边相接触即使存在浮动也是如此
CSS BFC原理及其应用

页面效果如下
CSS BFC原理及其应用

又因为 bfc的区域不会与float box重叠
让right单独成为一个bfc 只需在 right的样式下加 overflow:hidden
页面效果就如下

CSS BFC原理及其应用

right会自动的适应宽度这时候就形成了一个两栏自适应的布局

3. 清除浮动
当不给父节点设置高度子节点设置浮动的时候会发生高度塌陷这时候就需要清除浮动
例如
CSS BFC原理及其应用

页面效果如下
CSS BFC原理及其应用

这时候根据最后一条:计算bfc的高度时浮动元素也参与计算
给父节点**bfc 加入 .par{overflow:hidden} 即可
加入后的页面效果如下
CSS BFC原理及其应用

总结:
BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素反之也是如此

因为BFC的内部元素和外部的元素绝对不会互相影响因此当BFC外部存在浮动时它不应该影响BFC内部box的布局 BFC会通过变窄而不与浮动有重叠
同样的当BFC内部有浮动时为了不影响外部元素的布局 BFC计算高度时会包括浮动的高度避免margin重叠也是这样的一个道理

CSS BFC原理及其应用

相关推荐