css之BFC

  • 时间:
  • 浏览:
  • 来源:互联网

文档流一般分为定位流,浮动流和普通流。
BFC(Block Formatting Context)块级格式化上下文,是用于布局块级盒子的一块渲染区域。有其规定的渲染规则,决定了子元素如何布局,以及和其他元素之间的关系和作用。MDN上的解释:BFC是Web页面 CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。
注意:一个BFC的范围包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明,一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中,那么就意味着这个元素能与两个BFC中的元素发生作用,就违反了BFC的隔离作用。

在常规流中,盒子一个接一个排列。

静态定位:position: static
盒子的位置在常规流布局里规定的位置。
相对定位:position: relative
盒子依旧处于常规流之中,相对于其正常位置进行定位,它的偏移位置由top、bottom、left、right属性定义。但依旧会保留原来的位置,其他常规流不可占用。
绝对定位:position: absolute
盒子从常规流中被移除,不影响常规流的布局,其定位相对于上级元素中最近的一个relativefixed、absolute,如果没有则相对于body。偏移位置由top、bottom、left、right属性定义。
**浮动:**浮动会导致常规流环绕在其周围,除非设置clear等清除浮动的属性。它不会直接影响块级元素的布局,但它会影响到行内元素的布局,使其围绕在自己周围,撑大父级元素,从而间接影响块级元素布局。

BFC触发方式

根元素:即HTML标签
浮动元素:float值为 left、 right
overflow值不为 visible,为 auto、scroll、 hidden
display值为 inline-block、 table-cell、 table-caption、table、 inline-table、 flex、 inline-flex、 grid、 inline-grid
定位元素:position值为 absolute、 fixed 注意
注意!! display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell,是这个匿名的table-cell生成了BFC

浏览器对BFC区域的约束规则

  1. 生成BFC元素的子元素会一个接一个的放置。
  2. 垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
  3. 生成BFC元素的子元素中,每一个子元素左外边距与包含块的左边界相接触(对于从右到左的格式化,右外边距接触右边界),即使浮动元素也是如此(尽管子元素的内容区域会由于浮动而压缩),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。
解释:
  1. 内部的Box会在垂直方向上一个接一个的放置
  2. 内部的Box垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生折叠,不同BFC不会发生折叠。)
  3. 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
  4. BFC的区域不会与float的元素区域重叠
  5. 计算BFC的高度时,浮动子元素也参与计算
  6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

BFC的作用

阻止元素被浮动元素覆盖

一个正常文档流的block元素可能被一个float元素覆盖,挤占正常文档流,因此可以设置一个元素的float、display、position值等方式触发BFC,以阻止被浮动盒子覆盖。

可以包含浮动元素

通过改变包含浮动子元素的父盒子的属性值,触发BFC,以此来包含子元素的浮动盒子。但此时这里触发BFC并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。

阻止因为浏览器因为四舍五入造成的多列布局换行的情况

有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况,可以在最后一列触发BFC的形式来阻止换行的发生。

阻止相邻元素的margin合并

属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠,(设置writing-mode:tb-rl时,水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。这里给任一个相邻块级盒子的外面包一个div,通过改变此div的属性使两个原盒子分属于两个不同的BFC,以此来阻止margin重叠。

本文链接http://www.dzjqx.cn/news/show-617493.html