BFC 淩亂°似流年 2021-12-23 16:41 279阅读 0赞 ### BFC的定义\#\#\# ### 先看W3C文档 > In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the['margin'][margin] properties. Vertical margins between adjacent block-level boxes in a block formatting context [collapse][]. > In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's *line boxes* may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself [*may* become narrower][may_ become narrower] due to the floats). Block Formatting Context,中文直译为块级格式上下文。BFC就是一种布局方式,在这种布局方式下,盒子们自所在的containing block顶部一个接一个垂直排列,水平方向上撑满整个宽度(除非内部盒子自己建立了新的BFC)。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部,两个垂直方向相邻的块级元素的margin会发生“塌陷”。 文档这里也间接指出了垂直相邻盒子margin合并的解决办法:就是给这两个盒子也创建BFC。 通俗一点,可以把BFC理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子: 1. block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context; 2. inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成inline-level box。并且参与 inline formatting context; 3. run-in box: css3 中才有, 这儿先不讲了。 Formatting context Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。 BFC 定义 BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。 BFC布局规则: * 内部的Box会在垂直方向,一个接一个地放置。 * Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 * 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 * BFC的区域不会与float box重叠。 * BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。 * 计算BFC的高度时,浮动元素也参与计算 如何生成BFC? ①float属性不为none; ②position为absolute或fixed; ③display为inline-block, table-cell, table-caption, flex, inline-flex; ④overflow不为visible(可以是hidden、scroll、auto); Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. BFC的作用及原理 1、自适应两栏布局 <style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } </style> <body> <div class="aside"></div> <div class="main"></div> </body> 页面: ![这里写图片描述][SouthEast] 根据BFC布局规则第3条: 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。 根据BFC布局规则第四条: BFC的区域不会与float box重叠。 我们可以通过通过触发main生成BFC, 来实现自适应两栏布局。 .main { overflow: hidden; } 当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。效果如下: ![这里写图片描述][SouthEast 1] 2、清除内部浮动 代码: <style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body> 页面: ![这里写图片描述][SouthEast 2] 根据BFC布局规则第六条: 计算BFC的高度时,浮动元素也参与计算 为达到清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算。 代码: .par { overflow: hidden; } 效果如下: ![这里写图片描述][SouthEast 3] 3、防止垂直 margin 重叠 代码: <style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <p>Hehe</p> </body> 页面: ![这里写图片描述][SouthEast 4] 两个p之间的距离为100px,发送了margin重叠。根据BFC布局规则第二条: Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。 代码: <style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <div class="wrap"> <p>Hehe</p> </div> </body> 效果如下: ![这里写图片描述][SouthEast 5] 总结 其实以上的几个例子都体现了BFC布局规则第五条: BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。 因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。 转载于:https://www.cnblogs.com/leftJS/p/10930001.html [margin]: https://link.jianshu.com?t=https://www.w3.org/TR/CSS2/box.html#propdef-margin [collapse]: https://link.jianshu.com?t=https://www.w3.org/TR/CSS2/box.html#collapsing-margins [may_ become narrower]: https://link.jianshu.com?t=https://www.w3.org/TR/CSS2/visuren.html#bfc-next-to-float [SouthEast]: /images/20211223/eaa1e08e2fc743f697b1a40e6bfe118f.png [SouthEast 1]: /images/20211223/e0108ecd880a4abc92d9f1c4f823e84e.png [SouthEast 2]: /images/20211223/4b9d0e99c7a4443abe0c39f6d71e5199.png [SouthEast 3]: /images/20211223/dfd209212fdc463498259151b2e5bbd2.png [SouthEast 4]: /images/20211223/1ad6e9137a334d98905a909c60f5b5b6.png [SouthEast 5]: /images/20211223/9bf78054cf9641df8d63649f6fbdf6e7.png
相关 BFC 本文参考:[关于CSS-BFC深入理解][CSS-BFC] 1.BFC概念 **一句话概括:** BFC就是CSS布局的一个概念,是一块区域,一个环境。 *... 我不是女神ヾ/ 2024年04月17日 06:07/ 0 赞/ 66 阅读
相关 BFC 说在前面: 1. 文档流 > 文档流包括浮动流、定位流以及普通的标准流。 > 普通标准流就是FC 2. `FC` > 格式化上下文,它是页面中一 女爷i/ 2023年07月11日 06:12/ 0 赞/ 7 阅读
相关 BFC 什么是BFC BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了 我不是女神ヾ/ 2023年01月08日 11:27/ 0 赞/ 137 阅读
相关 css BFC > BFC(Block Formatting Context):块级格式上下文 > BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此 忘是亡心i/ 2022年12月22日 09:54/ 0 赞/ 209 阅读
相关 BFC原理 原文:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 一、BFC是什么? 悠悠/ 2022年09月25日 15:26/ 0 赞/ 193 阅读
相关 BFC介绍 BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 àì夳堔傛蜴生んèń/ 2022年09月25日 07:16/ 0 赞/ 173 阅读
相关 BFC规范 BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。 在同一个BFC中的两个毗邻的块级盒在垂直方向( 谁践踏了优雅/ 2022年07月15日 08:29/ 0 赞/ 194 阅读
相关 BFC 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单 你的名字/ 2022年05月17日 01:46/ 0 赞/ 208 阅读
相关 理解BFC 理解BFC 更好阅读体验移步:[zhangzippo.github.io/posts/2019/…][zhangzippo.github.io_posts_2019] 女爷i/ 2022年01月20日 03:03/ 0 赞/ 283 阅读
相关 BFC BFC的定义\\\ 先看W3C文档 > In a block formatting context, boxes are laid out one after the 淩亂°似流年/ 2021年12月23日 16:41/ 0 赞/ 280 阅读
还没有评论,来说两句吧...