BFC is already a familiar word. There are many articles on BFC on the Internet that show you how to trigger BFC and BFC (for example, clear floating and prevent overlap of margin ). Although I know how to use BFC to solve these problems, I still cannot explain it with confidence when someone asks me what BFC is. So I carefully read CSS2.1 spec and many articles over the past two days to fully understand BFC.
1. What is BFC?
Before explaining what BFC is, we need to introduce the concepts of Box and Formatting Context.
Box: basic unit of CSS layout
Box is the object and basic unit of CSS layout. In a straight view, a page is composed of many boxes. The element type and display attribute determine the type of the Box. Different types of boxes are involved in different Formatting Context (a container that determines how to render the Document). Therefore, elements in the Box are rendered in different ways. Let's see which boxes are available:
- Block-level box: If the display attribute is block, list-item, or table, block-level box is generated. And participate in block fomatting context;
- Inline-level box: If the display attribute is inline, inline-block, or inline-table, inline-level box is generated. And participate in inline formatting context;
- Run-in box: css3.
Formatting context
Formatting context is a concept in W3C CSS2.1 specification. It is a rendering area in the page and has a set of rendering rules that determine how its child elements will be located and the relationship and interaction with other elements. The most common Formatting context includes Block fomatting context (BFC) and Inline formatting context (IFC ).
OnlyBFC
AndIFC
,CSS3AddedGFC
AndFFC。
BFC Definition
The BFC (Block formatting context) literal translation is "Block-level formatting context ". It is an independent rendering area with only Block-level box involved. It specifies how the internal Block-level Box is laid out and has nothing to do with the outside of the area.
BFC layout rules: 2. What elements will generate BFC? Iii. functions and principles of BFC 1. Adaptive Layout of two columns
Code:
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; }</style><body> <div class="aside"></div> <div class="main"></div></body>
Page:
AccordingBFC
3rd layout rules:
The left side of the margin box of each element is in contact with the left side of the border box containing the block (for formatting from left to right, otherwise the opposite is true ). This is true even if floating occurs.
Therefore, although the floating element aslide exists, the left side of main is still in contact with the left side of the contained block.
AccordingBFC
Article 4 of layout rules:
BFC
Does not matchfloat box
Overlap.
We can generateBFC
To achieve adaptive two-column layout.
.main { overflow: hidden;}
When the main generation is triggeredBFC
After, this newBFC
Does not overlap with floating aside. Therefore, it is automatically narrowed according to the width of the included block and the width of the aside. The effect is as follows:
2. Clear internal floating
Code:
<style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; }</style><body> <div class="par"> <div class="child"></div> <div class="child"></div> </div></body>
Page:
AccordingBFC
Article 6 of layout rules:
ComputingBFC
The floating element is also involved in the calculation.
To clear the internal floating point, we can trigger the par generation.BFC
In this case, when the height of a par is calculated, the floating element child in the par is also involved in the calculation.
Code:
.par { overflow: hidden;}
The effect is as follows:
Bytes
3. Prevent Vertical margin overlap
Code:
<style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; }</style><body> <p>Haha</p> <p>Hehe</p></body>
Page:
The distance between two p is PX, and a margin overlap is sent.
The second rule is as follows:
Box
The vertical distance is determined by margin. Belong to the sameBFC
Two AdjacentBox
The margin of will overlap.
We can wrap a layer of containers outside p and trigger this container to generateBFC
. Then the two P do not belong to the sameBFC
.
Code:
<style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; }</style><body> <p>Haha</p> <div class="wrap"> <p>Hehe</p> </div></body>
The effect is as follows:
Summary
In fact, the above examples all reflectBFC
Article 5 of layout rules:
BFC
Is an isolated independent container on the page. The child elements in the container do not affect the external elements. And vice versa.
BecauseBFC
The internal and external elements will never affect each other. Therefore, whenBFC
When there is a floating outside, it should not be affectedBFC
Internal Box layout,BFC
It will narrow down without overlap with the floating. Similarly, whenBFC
When there is a floating inside, in order not to affect the layout of external elements,BFC
The calculated height includes a floating height. This is also the case for avoiding the overlap of margin.
Articles you may be interested in
- Use CSS3 to achieve superb loading animation Effects
- You can't think of it! Various sphere effects implemented by CSS
- Carefully selected online CSS3 code generation tools
- 10 convenient CSS3 development tools are recommended
- 40 excellent free CSS tools recommended for collection
Original article from: front-end Digest: the principle behind BFC magic via Melon Space
Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources
Source of this article [http://www.cnblogs.com/lhb25 /]