块格式化上下文(Block formatting contexts)

jerry 发布于2019-08-29 12:30 / 432人阅读

摘要：浮动，绝对定位元素，非块盒的块容器例如，，和和不为的块盒当该值已被传播到视口时除外会为它们的内容建立一个新的块格式化上下文布局规则内部盒会在垂直方向一个接一个的放置盒的垂直方向的距离由决定属于同一个的两个相邻盒子的会发生重叠每个元素的

浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和overflow不为visible的块盒（当该值已被传播到视口时除外（except when that value has been propagated to the viewport））会为它们的内容建立一个新的块格式化上下文

BFC布局规则:

BFC内部盒会在垂直方向,一个接一个的放置

盒的垂直方向的距离由margin决定.属于同一个BFC的两个相邻盒子的margin会发生重叠

每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也如此

BFC的区域不会与float box重叠(利用这个特性可以做自适应窗口大小)

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

计算BFC高度时,浮动元素也参与计算(清除浮动的原理)

块格式化上下文由以下之一创建:

根元素或其它包含它的元素

浮动(元素的float不是none)

绝对定位的元素(元素具有position为absolute或fixed)

行内块 inline-blocks(元素具有display:inline-block)

表格单元格(元素具有display:table-cell,表格单元格默认属性)

表格标题(元素具有display:table-caption,表格标题默认属性)

块元素元素具有overflow值不是visible

弹性盒子flex boxes(元素具有display:flex或inline-flex)

display:flow-root

一个块格式化上下文包括创建它的元素内部所有内容,除了会创建新的块格式化上下文的元素

BFC与margin

BFC可以解决margin折叠问题,需要注意的是,overflow:hidden等属性只在父子元素下起作用,相邻兄弟元素无效

BFC与float

BFC可以改变float的覆盖兄弟元素的问题,实现一侧定宽的布局,还可以解决父元素塌陷问题

细说CSS中的BFC
学习格式化上下文

GPU云服务器云服务器 format时间格式 linux给整块磁盘格式化 linux格式化整块硬盘 linux 格式化整块硬盘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111941.html

BFC原理详解

摘要：最常见的有简称和简称。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与这个容器外的毫不相干。根据布局规则第二条垂直方向的距离由决定。参考前端精选文摘神奇背后的原理之详解深入理解流体特性和特性下多栏自适应布局布局一.BFC是什么在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 1.BOX：CSS布局的基本单位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 评论0 收藏0
关于BFC的总结

摘要：虽然工作这么多年了，但是如果让我直接解释一下什么是的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。两个兄弟盒之间的垂直距离由属性决定。最常见的有简称和简称。虽然工作这么多年了，但是如果让我直接解释一下什么是BFC的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。大家也可以关注我的GitHub后续的更新 1.BFC...

chadLi 2019-08-29 15:27 评论0 收藏0
关于BFC的总结

摘要：虽然工作这么多年了，但是如果让我直接解释一下什么是的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。两个兄弟盒之间的垂直距离由属性决定。最常见的有简称和简称。虽然工作这么多年了，但是如果让我直接解释一下什么是BFC的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。大家也可以关注我的GitHub后续的更新 1.BFC...

oneasp 2019-08-02 10:28 评论0 收藏0
BFC-块格式化上下文（block formatting context）

摘要：概念块格式化上下文，是页面块级元素布局及浮动元素彼此交互的区域。阻止相邻元素外边距合并的方法被非空内容或分隔开。不在一个普通流中或用分割开。让在垂直方向上不毗邻。 BFC概念 BFC（block formatting context）块格式化上下文，是Web页面块级元素布局及浮动元素彼此交互的区域。BFC是一个独立的布局环境，（实际页面渲染时是不可见的），由BFC构建的区域其内部元素...

keithyau 2019-08-29 16:07 评论0 收藏0
视觉格式化模型(Visual formatting model)

摘要：块级盒参与块格式化上下文。行内级盒参与行内格式化上下文块格式化上下文行内格式化上下文相对定位浮动盒就是一个在当前行向左或向右移动的盒。浮动绝对定位绝对定位模型中，一个盒会有相对于其包含块的明确偏移，它会从常规流中全部移除不会影响后面的兄弟。在可视化格式模型(Visual formatting model)当中,文档树中的每个元素根据其盒模型生成0个或多个盒.这些盒的布局由(以下因素)...

jokester 2019-08-30 15:53 评论0 收藏0
前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？

摘要：官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块，同时又是的包含块，不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为，则其使用的值来自相等。作者：陈大鱼头 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

lowett 2019-08-30 15:44 评论0 收藏0