preface
I have been hearing about BFC in CSS. I happened to encounter the problem of margin folding in IFE exercises, so I happened to understand the mechanism of BFC.
What is BFC
Like all previous posts, I will start from the perspective of What to understand the BFC from the simple to the deep. Formatting context is a concept in the W3C CSS2.1 specification.
It is a rendering area on the page and has a set of rendering rules. It determines how its children will be positioned and how they will relate and interact with other elements.
Block Formatting Contexts (BFC) is the rendering and display rule for Block level elements. In layman’s terms, the BFC can be thought of as a large, closed box in which children do not affect the outside elements and vice versa.
The layout rules of BFC are as follows: 1. The internal boxes are placed vertically one by one. The BFC is an isolated container on the page. 3. The upper and lower margins of two adjacent boxes belonging to the same BFC will overlap; 5 The left side of each element touches the left side of the contained box, even if there is a float; 6 BFC areas do not overlap with float;
So how do you trigger a BFC? The BFC feature can be triggered if an element meets any of the following criteria:
-
Body root element;
-
Float element: float is an attribute value that is not None;
-
Absolute position elements: Position (Absolute, fixed)
-
Display: inline-block, table-cells, flex
-
Overflow values other than visible (hidden, auto, Scroll)
BFC features and applications
Next, we will introduce the common features and applications of BFC. In this part, we will use the layout rules and trigger conditions mentioned above to explain the reasons. Therefore, we need to pay attention to them.
1 The vertical margins of block elements in two adjacent normal streams will collapse
<head>
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
</head>
<body>
<div class="p"></div>
<div class="p"></div>
</body>
Copy the codeThe renderings are:
According to article 3 of the BFC rules:
The vertical distance of the Box is determined by margin. The upper and lower margins of the + of two adjacent boxes belonging to the same BFC will overlap.
Margin folding occurs in the previous example because they both belong to the root element body, so we need to make them not belong to the same BFC to avoid margin folding:
<div class="p"></div>
<div class="wrap">
<div class="p"></div>
</div>
Copy the code
.wrap {
overflow:hidden;
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
Copy the codeThe renderings are:
2 BFC can contain floating elements (clear floating)
Normally, floating elements leave the normal document flow, so in the following code:
<div style="border: 1px solid #000;" >
<div style="width: 50px; height: 50px; background: #eee;
float: left;" >
</div>
</div>
Copy the codeThe outer div will not be able to contain the inner floating div.
But if we fire the BFC of the external container, the external div container can be wrapped around the floating element, according to article 4 of the BFC specification: when calculating the height of the BFC, the floating element is also computed, so just change the code to look like this:
<div style="border: 1px solid #000; overflow: hidden">
<div style="width: 100px; height: 100px; background: #eee; float: left;" ></div>
</div>
Copy the codeThe following effects can be achieved:
3 BFC prevents elements from being overwritten by floating elements
Let’s start with an example:
<div class="aside"></div>
<div class="main"></div>
div {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
}
Copy the codeThe renderings are:
-
.main {
-
overflow:hidden;
-
height:200px;
-
background-color:red;
-
}
Copy the codeThis approach can be used to achieve an adaptive layout of two columns.
Iii. Brief introduction of IFC
IFC layout rules:
-
The boxes are placed horizontally, one after the other, starting at the top of the containing block.
-
When placing these boxes, the space they occupy in the horizontal direction of the inside and outside margin + border is taken into account; In the vertical direction, these boxes may be aligned in different ways: horizontal margin, padding, and border are valid, but not vertical. Cannot specify width and height.
-
The width of the line box is determined by the inclusion block and the float that exists; The height of the line box is determined by the height of the line
Original: https://segmentfault.com/a/1190000012993668
