什么是BFC？

时间 2019-11-10

标签什么 bfc 繁體版

原文原文链接

Block Formatting Contexts 即块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box（display 属性为 block, list-item, table 的元素）如何布局，而且与这个区域外部绝不相干。其中 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就是一个独立的盒子，而且与这个独立盒子里的布局不受外部影响，固然它也不会影响到外面的元素。php

在文档呈现开始的时候，会自动建立一个BFC来对整个页面进行布局，在没有建立一个新的BFC的时候，整个文档就这一个BFC。css

BFC的规则

内部的box会在垂直方向，从顶部开始一个接着一个地放置（上面的例子能够看出）html
同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠布局
每一个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，不然相反)，即便存在浮动也是如此flex
BFC的区域不会与float box重叠code
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然orm
计算BFC的高度时，浮动元素也参与计算htm

触发BFC

根元素文档
float属性不为none（如：left | right）string
overflow的值不为visible（如：hidden | auto | scroll）
display属性值为inline-block | flex | inline-flex | table-cell | table-caption
position为absolute或fixed

应用BFC

解决margin叠加问题

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　　</head>
<body>
　　<style type="text/css">
.　　　　overflow{
　　　　　　overflow: hidden;
　　　　}
　　　　.div-one{
　　　　　　margin-bottom:20px;
　　　　　　background: red;
　　　　}
　　　　.div-two{
　　　　　　margin-top:10px;
　　　　　　background: blue;
　　　　}
　　</style>
　　　　<div class="overflow">
　　　　　　<div class="div-one">
　　　　　　　　abc
　　　　　　</div>
　　　　</div>
　　　　<div class="overflow">
　　　　　　<div class="div-two">
　　　　　　　　def
　　　　</div>
　　</div>
</body>
</html>

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

清除内部浮动

<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>BFC清除内部浮动</title>

　　　　<style type="text/css">

　　　　　　.child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;float:left;}

　　　　　　.parent {width: 300px; border: 1px solid #95E1D3;float:left;}

　　　　　　/*.parent或者不用float:left;用overflow：hidden;*/

　　　　</style>

　　</head>

　　<body>

　　　　<div class="parent">

　　　　　　<div class="child">11</div>

　　　　　　<div class="child">22</div>

　　　　</div>

　　</body>

</html>

3.一个浮动，一个不浮动：

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　</head>
　　<body>
　　　　<div style="width: 400px; border: 1px solid #95E1D3;">
　　　　　　<div style="background-color: blue; border: 1px solid #FCE38A; width: 100px; height: 100px;float:left;">11</div>
　　　　　　<div style="background-color: red; border: 1px solid #FCE38A; width: 200px; height: 100px;overflow: hidden;">22</div>

</div>
　　</body>
</html>

仅供参考。