BFC是个啥?

更新日期: 2019-05-27阅读: 1.6k标签: 浮动

BFC的定义

BFC到底是个啥呢?先贴出一段大佬们在分析BFC的时候字面上的理解:

css布局中,是通过对一个个box的布局,来实现整体页面的布局,这一个个box也就是一个个容器元素,这些元素分为两类:块级元素(block),行内元素(inline)。 对于不同类型的元素,有不同的处理规则,这个元素内部的子元素也会用不同方式去渲染

BFC中的FC为formatting context的首字母缩写,翻译过来就是“格式化上下文”,它是页面上的一个渲染区域,并有一套渲染规则,规定了它内部元素的渲染方式 ,而BFC就表示“块级格式化上下文”。对应的还有IFC,FFC,GFC等

我的理解就是:BFC是一种css渲染规则,规定了块级元素的渲染规则。运用了BFC渲染规则的元素是一个独立的渲染区域,和渲染规则,不会影响其他外部元素的布局


使用BFC规则后当前元素和内部元素表现

  1. BFC内部的Box(块元素)会在垂直方向,一个接一个地放置
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。
  4. BFC的区域不会与float元素区域发生重叠
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算(可以解决浮动元素的父元素高度塌陷问题)


生成BFC规则的方式(抄自MDN)

  1. 根元素(html)默认生成一个BFC
  2. 浮动元素(元素的 float 不是 none)
  3. 绝对定位元素(元素的 position 为 absolute 或 fixed)
  4. 行内块元素(元素的 display 为 inline-block)
  5. 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  6. 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  7. 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  8. overflow 值不为 visible 的块元素
  9. display 值为 flow-root 的元素
  10. contain 值为 layout、content或 paint 的元素
  11. 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  12. 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
  13. 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  14. column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。

注:BFC包含创建它的元素内部的所有内容


BFC常用场景

一,解决浮动的父元素高度塌陷问题

.box { background-color: pink; border: 2px solid skyblue; display: flow-root; } 
.float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; }

子元素设置float后,父级元素高度塌陷了。根据上面提到的BFC元素在计算高度的时候,会算上其中的浮动元素的高度,所以上面例子中这种情况,可以设置父元素为BFC来解决:

.box { background-color: pink; border: 2px solid skyblue; } 
.float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; }


二,解决margin重叠问题

.mar30{margin:30px;}

根据BFC的独立,不影响其他元素布局的特性,通过设置其中一个元素为BFC来解决:

.mar30{margin:30px;} 
.bfc{display:flow-root;}


链接: https://www.fly63.com/article/detial/9210

为什么设置overflow为hidden可以清除浮动带来的影响

在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动的方法,最常用的就是设置父元素的overflow:hidden这个属性

详解利用clear清除浮动的一些问题解决

我们一直在说 解决 高度塌陷都问题,从来没有说清除浮动。 是因为本质上,浮动并没被清除,我们只是利用clear属性解决了浮动元素带来的父级元素高度塌陷问题。而且clear属性影响也只是设置clear属性的元素本身,而不是浮动元素。

css清除浮动的原理

最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解

什么是BFC? CSS 如何使用伪元素清除浮动?

BFC概念:块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。

清除浮动的4种方式

清除浮动:根据情况需要来清楚浮动 。清除浮动的目的: 就是为了解决 父 盒子高度为0 的问题。1.、额外标签法 给浮动盒子的后面添加一个新的div;2、overflow:hidden 触发了bfc模式

我对BFC的理解

对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC。

Web布局:浮动

不知道大家是否和我有同样的一个感觉,每当拿起一篇杂志文章,总能发现左边或右边有图片,文字流畅地围着图片,这就是打印世界中看到的浮动:在Web的世界中,CSS的 float 设计初衷也是用来处理文本围绕图片排版的,就像在杂志布局中一样

总结清除浮动的方法

方法一、在结尾处添加空div标签clear:both;方法二、父级div定义 overflow: auto;方法三、使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)

CSS如何清除浮动?清除浮动的几种方式

在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性。爱,是因为通过浮动,我们能很方便地进行布局;恨,是因为浮动之后遗留下来太多的问题需要解决。下面本篇文章给大家介绍CSS清除浮动的几种方法

CSS浮动标准修复top塌陷和清除浮动及IE兼容标准格式

浮动元素有左浮动(float:left)和右浮动(float:right)两种,浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!