{"componentChunkName":"component---src-templates-blog-post-js","path":"/bfc-block-level-formatting-context/","result":{"data":{"markdownRemark":{"html":"<h2>基本概念</h2>\n<p>块格式化上下文（BlockFormattingContext，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域<br>\n简单来说：<code class=\"language-text\">BFC</code>是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。<br>\n如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响</p>\n<h2>触发条件</h2>\n<blockquote>\n<p>W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为\"visiable\"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文</p>\n</blockquote>\n<ul>\n<li>根元素或包含根元素的元素(&#x3C;html>)</li>\n<li>浮动元素：float：<strong>left|right</strong>或<strong>inherit</strong>（≠none）</li>\n<li>绝对定位元素：position：<strong>absolute</strong>或<strong>fixed</strong></li>\n<li>display：<strong>inline-block | flex | inline-flex | table-cell</strong>或<strong>table-caption</strong></li>\n<li>overflow：<strong>hidden|auto</strong>或<strong>scroll</strong>(≠visible)</li>\n<li>弹性元素（display为<strong>flex</strong>或<strong>inline-flex</strong>元素的直接子元素）</li>\n<li>网格元素（display为<strong>grid</strong>或<strong>inline-grid</strong>元素的直接子元素）</li>\n<li>contain 值为<strong>layout</strong>、<strong>content</strong>或<strong>paint</strong>的元素</li>\n</ul>\n<h3>渲染规则</h3>\n<ul>\n<li>BFC边距不会合并</li>\n<li>BFC的区域不会与浮动元素的box重叠</li>\n<li>BFC是一个独立的容器，外面的元素不会影响里面的元素</li>\n<li>计算BFC高度的时候浮动元素也会参与计算</li>\n</ul>\n<h3>应用场景</h3>\n<ul>\n<li>让浮动内容和周围的内容等高(overflow: auto)</li>\n<li>防止浮动导致父元素高度塌陷</li>\n<li>外边距塌陷(创建新的BFC避免两个相邻&#x3C;div>之间的 外边距合并问题)</li>\n</ul>","timeToRead":1,"frontmatter":{"title":"什么是BFC ？","date":"September 09, 2019","spoiler":"dddddd"},"fields":{"slug":"/bfc-block-level-formatting-context/"}}},"pageContext":{"slug":"/bfc-block-level-formatting-context/","previous":{"fields":{"slug":"/css-priority/"},"frontmatter":{"title":"css优先级"}},"next":{"fields":{"slug":"/learn-about-the-event-loop-node/"},"frontmatter":{"title":"理解事件循环-node"}}}},"staticQueryHashes":["3649515864","63159454"]}