BFC 我不是女神ヾ 2023-01-08 11:27 137阅读 0赞 **什么是BFC** BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。 BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。 **BFC的布局规则** * 内部的Box会在垂直方向,一个接一个地放置。 * Box垂直方向的距离由margin决定。属于**同一个**BFC的两个相邻Box的margin会发生重叠。(相邻两个div默认也是这样,取两者中的最大值,而不是两个margin相加) * 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此。 * BFC的区域不会与float box重叠。 * BFC在页面上是一个独立的容器,它外边的元素不会影响它里边的元素,里边的元素也不会影响它外边的元素 * 计算BFC的高度时,浮动元素也参与计算。 **如何创建BFC** * 浮动元素:float除none以外的值 * 定位元素:position除static、relative以外的值(absolute、fixed) * overflow除visible以外的值(hidden、auto、scroll) * display为inline-block、table-cells(跟table相关的那几个)、flex **BFC的作用** **1、利用BFC解决margin重叠问题** 相邻两个div默认margin会发生重叠,取两者中的最大值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BFC</title> <style> *{ margin: 0; padding: 0; } .top{ width: 200px; height: 200px; background: red; margin-bottom: 40px; } .bottom{ width: 200px; height: 200px; background: blue; margin-top: 60px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][] 当给红色块下外边距margin-bottom设置40px,给蓝色块上外边距margin-top设置60px时,上下外边距会发生重叠,两个色块的间距解析为两者中的较大值60px 根据第二条规则,属于同一个BFC的两个相邻的Box会发生margin重叠,所以我们可以设置它们所处两个不同的BFC,也就是我们可以让把第二个div用div包起来,然后激活它使其成为一个BFC <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BFC解决margin重叠</title> <style> *{ margin: 0; padding: 0; } .top{ width: 200px; height: 200px; background: red; margin-bottom: 40px; } .bottom{ width: 200px; height: 200px; background: blue; margin-top: 60px; } .box{ overflow: hidden; } </style> </head> <body> <div class="top"></div> <div class="box"> <div class="bottom"></div> </div> </body> </html> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][] 通过给蓝色块添加父元素.box并设置样式overflow:hidden;使得父元素.box创建了BFC,此时红色块和蓝色块属于不同的BFC,红色块的BFC仍然是根元素<html>,蓝色块的BFC是父元素.box。从而解决了两者的上下margin重叠问题。 **2、利用BFC清除浮动,解决父元素高度塌陷问题** 当我们不给父节点设置高度,子节点设置浮动的时候,会发生高度塌陷,这个时候我们就要清除浮动。 <!DOCTYPE html> <html> <head> <title>BFC清除浮动</title> <style> *{ margin: 0; padding: 0; } .par { border: 10px solid greenyellow; width: 300px; } .child { border: 5px solid blue; width:100px; height: 100px; float: left; } </style> </head> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body> </html> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2][] 我们根据最后一条规则(计算BFC的高度时,浮动元素也参与计算),给父元素创建BFC <!DOCTYPE html> <html> <head> <title>BFC清除浮动</title> <style> *{ margin: 0; padding: 0; } .par { border: 10px solid greenyellow; width: 300px; overflow: hidden; } .child { border: 5px solid blue; width:100px; height: 100px; float: left; } </style> </head> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body> </html> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3][] 给父元素.par设置样式overflow:hidden;使得父元素.par创建了BFC,而BFC规定“计算BFC高度时浮动元素也参于计算”,此时子元素.child虽然设置了浮动,但其高度仍计算至父元素内,从而解决了高度塌陷问题 **3、实现自适应两栏布局** 根据(每个盒子的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BFC实现两栏布局</title> <style> *{ margin: 0; padding: 0; } .left{ width: 100px; height: 200px; background: yellowgreen; float: left; text-align: center; line-height: 200px; font-size: 20px; } .right{ height: 300px; background: blue; text-align: center; line-height: 300px; font-size: 40px; } </style> </head> <body> <div class="left">left</div> <div class="right">right</div> </body> </html> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4][] 根据(BFC的区域不会与float box重叠),所以我们让right单独成为一个BFC <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BFC实现两栏布局</title> <style> *{ margin: 0; padding: 0; } .left{ width: 100px; height: 200px; background: yellowgreen; float: left; text-align: center; line-height: 200px; font-size: 20px; } .right{ height: 300px; background: blue; text-align: center; line-height: 300px; font-size: 40px; overflow: hidden; } </style> </head> <body> <div class="left">left</div> <div class="right">right</div> </body> </html> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5][] right会自动的适应宽度,这时候就形成了一个两栏自适应的布局。 ### 总结 ### BFC在页面上是一个独立的容器,它外边的元素不会影响它里边的元素,里边的元素也不会影响它外边的元素。 因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是一个道理。 参考经典好文:[https://blog.csdn.net/sinat\_36422236/article/details/88763187][https_blog.csdn.net_sinat_36422236_article_details_88763187] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221119/672f29fb2ed94a08815ca1fad02ee515.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221119/e87fd48ba8be4c0abb0e82e9b4060907.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2]: /images/20221119/d8074c919f3a4555947d810608e786e8.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3]: /images/20221119/e3bbad2ffc4c4a6dbe80006d247c698e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4]: /images/20221119/18c5a98a773843c48674b91d3baccd38.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5]: /images/20221119/b7c2044be4fe4823b857b96a6d52d34d.png [https_blog.csdn.net_sinat_36422236_article_details_88763187]: https://blog.csdn.net/sinat_36422236/article/details/88763187
相关 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 赞/ 138 阅读
相关 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 赞/ 209 阅读
相关 理解BFC 理解BFC 更好阅读体验移步:[zhangzippo.github.io/posts/2019/…][zhangzippo.github.io_posts_2019] 女爷i/ 2022年01月20日 03:03/ 0 赞/ 284 阅读
相关 BFC BFC的定义\\\ 先看W3C文档 > In a block formatting context, boxes are laid out one after the 淩亂°似流年/ 2021年12月23日 16:41/ 0 赞/ 280 阅读
还没有评论,来说两句吧...