What is BFC?
BFC (Block Formatting Context) is a rendering mechanism in CSS. Is a box with a separate rendering area (also known as a boundary) that dictates how the inside elements are laid out, and that the inside elements of the box do not affect the outside elements.
We declare a function called BFC. Because of the scope of the function, all the variables are declared and run in this function, without affecting the variables outside the function.
var box = 1;
function bfc() {
var box = "2";
console.log(box);
}
bfc(); / / 2
console.log(box) / / 1
Copy the codeSo, we can understand this: the so-called BFC is a scope of CSS?
The generation of landing
Since JS can implement block-level scoping using functions and other methods, CSS can also implement BFC in some way. The official BFC documentation reads:
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
As you can see from this description, the following methods can create a new block-level execution context (BFC) :
- Body root element (HTML)
- Float element: float a value other than None
- Absolute position elements: Position (Absolute, fixed)
- Display inline-block, table-cells, flex
- Overflow values other than visible (hidden, auto, Scroll)
BFC layout rules
All boxes here are block-level elements
1. Internal block-level elements are placed vertically, one after the other. Just as each block-level element occupies a row under the body root, one vertical at a time.
2. The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap
<style type="text/css">
.top {
width:100px;
height:100px;
background:blue;
margin-bottom: 30px;
}
.bottom {
width:100px;
height:100px;
background:red;
margin-top: 20px;
}
</style>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
Copy the codeBecause two adjacent Box elements.top and.bottom are under the same body, the bottom margin of.top overlapped with the top margin of.bottom.
- When two adjacent margins are both positive, the result of folding is the larger value between them
- When two adjacent margins are both negative, the result of folding is the smaller value between them
- When two margins are positive and negative, the result of folding is the sum of the two
To solve the margin overlap problem, just put.top or.bottom in a different BFC. Here we wrap another container around.bottom and generate a BFC from the container
<style type="text/css">
.top {
width:100px;
height:100px;
background:blue;
margin-bottom: 30px;
}
.bottom {
width:100px;
height:100px;
background:red;
margin-top: 20px;
}
.wrap {
overflow: auto;
}
</style>
<body>
<div class="top"></div>
<div class="wrap">
<div class="bottom"></div>
</div>
</body>
Copy the code
3. The left side of the margin Box of each Box inside the BFC touches the left side of the border Box containing the block (for left-to-right typesetting, otherwise the opposite). This is true even if there is a float.
If you float an element and do not clear the float, the parent Box does not wrap the inner float Box, but it is still within the parent Box. Floating left is the left side of the child Box and touches the left side of the parent Box’s border Box. Float to the right is when the child Box touches the parent Box to the right of the border Box, unless margin is set to spread the distance.
4. The BFC area does not overlap with the float box.
<style type="text/css">
.aside {
width: 100px;
height: 100px;
background: blue;
float: left;
}
.main {
width: 200px;
height: 200px;
background: red;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
Copy the code
.aside floats away from the document stream containing the block, superimposed on.main.
When the. Main setting produces a BFC,. Main and. Aside are separated, and the BFC area does not overlap with the float box. If.main does not set a width, the body width will be adapted to allow for an adaptive two-column layout.
<style type="text/css">
.aside {
width: 100px;
height: 100px;
background: blue;
float: left;
}
.main {
width: 200px;
height: 200px;
background: red;
overflow: auto;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
Copy the code
5. A BFC is a separate container on a page, and the child elements in the container do not affect the outside elements. And vice versa.
- The elements outside and inside the BFC do not affect each other, so when there is a float outside the BFC, it does not affect the layout of its internal Box. The BFC does not overlap with the float through overflow hiding
- If the BFC has floating elements, the height of the floating elements must be considered when calculating the height of the BFC so as not to affect the layout of external elements
6. When calculating the height of the BFC, the floating element also participates in the calculation
<style type="text/css">
.wrap {
border: 2px solid blue;
}
.child {
width: 200px;
height: 200px;
background: red;
float: left;
}
</style>
<body>
<div class="wrap">
<div class="child"></div>
</div>
</body>
Copy the code
Because the.child element is set to float, out of the document flow, and its containing block is not BFC, the height is not stretched and only the top and bottom borders of the containing block are shown.
[Clear internal float] When the parent element.wrap is set to produce the BFC, the height of the parent element is split because the float element is also involved in the calculation of the height of the BFC.
<style type="text/css">
.wrap {
border: 2px solid blue;
overflow: auto;
}
.child {
width: 200px;
height: 200px;
background: red;
float: left;
}
</style>
<body>
<div class="wrap">
<div class="child"></div>
</div>
</body>
Copy the code
What does the BFC do?
- Prevent vertical margin overlap
- Adaptive two-column layout rule 4
- Clear internal floats [Layout Rule 6]