Article directory
1. Definition of BFC
Block formatting context (Block Formatting Context, BFC) is a part of the visual CSS rendering of web pages. It is the
area where block-level boxes are generated during the layout process, and it is also the limited area for interaction between floating elements and other elements.
Generally speaking: BFC is an independent layout environment, which can be understood as a container, in which items are placed according to certain rules
, and will not affect items in other environments. If an element meets the conditions to trigger a BFC, the layout of elements in the BFC is not affected by external
influences.
Add two related concepts:
- Box: Box is the object and basic unit of CSS layout. A page is composed of many Boxes. This Box is what we call the
box model. - Formatting context: block-level context formatting, which is a rendering area in the page, and has a set of rendering rules, which
determine how its child elements will be positioned, as well as their relationship and interaction with other elements.
Conditions for creating BFC
- root element: body;
- The element is set to float: float is a value other than none;
- Element setting absolute positioning: position (absolute, fixed);
- display value: inline-block, table-cell, table-caption, flex, etc.;
- overflow value: hidden, auto, scroll;
Features of BFC
- In the vertical direction, they are arranged from top to bottom, which is consistent with the arrangement of document flow.
- In BFC, the margins of two adjacent containers will overlap
- When calculating the height of BFC, it is necessary to calculate the height of floating elements
- BFC area will not overlap with floating container
- BFC is an independent container, and the internal elements of the container will not affect the external elements
- The left margin value of each element touches the left border of the container
2. The role of BFC
1) Solve the problem of overlapping margins : Since BFC is an independent area, the internal elements and external elements do not affect each other. Changing two elements into two BFCs solves the problem of overlapping margins. The specific method is as follows
- Child elements become inline boxes: display: inline-block
- Add floating attributes or positioning to child elements
2) Solve the problem of height collapse (clear float) : After setting float on the child element, the height of the parent element will collapse, that is, the height of the parent element will become 0. To solve this problem, just turn the parent element into a BFC, because the height of the BFC includes the height of the floated element. The common way is to set it to the parent element overflow:hidden.
3) Create an adaptive two-column layout : a two-column layout with a fixed width on the left and adaptive width on the right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html,body{
height: 100%;
}
/* 浮动 */
.container{
height: 100%;
background-color: aqua;
}
.left{
float: left;
width: 200px;
height: 100%;
background-color: blanchedalmond;
}
.right{
width: auto;
height:100%;
background-color: pink;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 两栏布局 -->
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
Left set float:left, right set overflow：hidden. In this way, the BFC is triggered on the right side, and the area of the BFC will not overlap with the floating elements, so the two sides will not overlap, realizing an adaptive two-column layout.