| 🔥BFC是什么？如何触发？有什么应用场景？ | 您所在的位置：网站首页 › mrz是什么牌子 › 🔥BFC是什么？如何触发？有什么应用场景？ |
🔥BFC是什么？如何触发？有什么应用场景？
|
这是我参与更文挑战的第17天，活动详情查看： 更文挑战 面试官：说一说BFC吧 我：??那是啥....💥 BFC是什么BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 触发条件一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下文： 根元素() 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（元素的 display 为 inline-block） 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值） 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值） 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table） overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素） 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 等等。 BFC渲染规则 BFC垂直方向边距重叠 BFC的区域不会与浮动元素的box重叠 BFC是一个独立的容器，外面的元素不会影响里面的元素 计算BFC高度的时候浮动元素也会参与计算 应用 防止浮动导致父元素高度塌陷（清除浮动） --css .container { border: 10px solid red; } .inner { background: #08BDEB; height: 100px; width: 100px; } --html 复制代码接下来将inner元素设为浮动: .inner { float: left; background: #08BDEB; height: 100px; width: 100px; } 复制代码会产生这样的塌陷效果： 但如果我们对父元素设置BFC后, 这样的问题就解决了 .container { border: 10px solid red; overflow: hidden; } 复制代码同时是清除浮动的一种方式。 避免外边距折叠两个块在同一个BFC内，会造成外边距折叠。 --css .container { background-color: green; overflow: hidden; } .inner { background-color: lightblue; margin: 10px 0; } --html 1 2 3 复制代码此时三个元素的上下间隔都是10px, 因为三个元素同属于一个BFC。 现在我们做如下操作: --html 1 2 3 --css .bfc{ overflow: hidden; } 复制代码可以看到和我们的想法已经一样了。没有出现重叠。 |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |