Loading... BFC的英文全称是 **Block Formatting Contex** 翻译出来就是 格式化上下文,记得学习看过一堆专业的描述,但是都没记住。。 只记得最后老师这么总结:bfc就像是护崽的娘,不让孩子去打扰别人,也不让别人影响到自己。 下面就用我自己的语言进行mark一下吧: BFC是 W3C CSS2.1 规范中提出的一个概念,它是页面中的一块渲染区域,并且它有一套渲染规则,决定了自己的子元素和周围的元素之间的关系。 **以下这些条件会产生BFC**(MDN里面查到的): 1.根元素(<html>) 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-8.footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table) 9.overflow 值不为 visible 的块元素 10.display 值为 flow-root 的元素 11.contain 值为 layout、content或 paint 的元素 12.弹性元素(display为 flex 或 inline-flex元素的直接子元素) 13.网格元素(display为 grid 或 inline-grid 元素的直接子元素) 14.多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1) 15.column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。 **bfc元素所具有的特性** 1.内部的盒子会在垂直方向上一个接一个的放置。(类似标准流) 2.垂直方向上的距离由margin决定 (类似标准流) 3.bfc的区域不会与float的元素区域重叠。(比如等分布局可以用到) 4.计算bfc的高度时,浮动元素也参与计算 5.bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。 说了这么多肯定都懵逼了,看看具体的一些应用 **1.解决css嵌套盒子外边距合并的问题(塌陷问题)。** 嵌套盒子外边距塌陷指的是,当一个盒子嵌套在另一个盒子中的时候,子盒子设置margin值之后,父盒子也会跟着掉下来 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; } div { display: block; width: 300px; height: 200px; background-color: blue; } span { display: block; width: 180px; height: 80px; background-color: red; } </style> </head> <body> <div> <span></span> </div> </body> </html> ![塌陷问题][1] 这时候就可以创建新的BFC避免两个相邻盒子外边距产生合并问题 几种解决办法: 1:父容器:border:1px solid;(不能是0px) 2:父容器:overflow: hidden;(或auto) 3:父容器:padding:1px;(不能是0或auto,其他的任意数值都可以) 4:父容器或子容器: float:left;(不能是auto) 5:父容器或子容器:position:absolute; 6:子容器:display:inline-block;(或是inline-table) 7:相邻元素:任意一个添加float:left(不能是auto) **2.解决因浮动造成的父元素上移问题** 这个很常见 给父元素加一个clearfix类名 创建一个BFC区域清除浮动 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; } .clearfix::after { content: ""; display: block; clear: both; } div { display: block; width: 300px; background-color: blue; } span { display: block; width: 180px; height: 80px; background-color: red; float: left; } </style> </head> <body> <div class="clearfix"> <span></span> </div> </body> </html> ![浮动][2] [1]: https://www.wumao.org/usr/uploads/2019/08/3568035823.png [2]: https://www.wumao.org/usr/uploads/2019/08/1149075865.png Last modification:August 13th, 2019 at 10:23 am © 允许规范转载 Support If you think my article is useful to you, please feel free to appreciate ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat