BFC layout principle, bfc Layout
The original intention of writing this blog is to solve the floating problem, so I thought about what BFC is and why it can be cleared. I don't know the results, but I don't know what it means. I want to study it and summarize my learning experience.
1. What is BFC?
BFC is short for Box Formatting Context. It is literally translated as "block-level Formatting Context ".
1.1 Box is the basic unit of css layout
Box is the object and basic unit of CSS layout. The type and display characteristics of elements determine the type of Box. Different types of boxes determine different layout forms of pages.
display:run-in;
1.2 Formatting Context
It refers to a rendering area in a page and has a set of rendering rules. It determines how its sub-elements are located, and how they interact with other elements.
The most common Formatting context includes Block fomatting context (BFC) and Inline formatting context (IFC ).
1.3 BFC
Block-level formatting context refers to an independent Block-level rendering area. Only Block-level BOX is involved. This area has a set of rendering rules to constrain the layout of Block-level boxes, it has nothing to do with the external region.
2. Generation of BFC
3. BFC layout rules
4. Some BFC applications
Prevent Vertical margin overlapIn rule 2, the two adjacent boxes of the same BFC overlap, and the code and effect are as follows:
<style type="text/css"> div{ width: 100px; height: 100px; margin: 10px; }</style>
It can be seen that the magin values of the three divs are both 10 and overlap with each other. So how can we avoid it? Rule 2 says that the elements in the adjacent box of the same BFC will overlap margin, so we can leave them not in the same BFC, therefore, a p tag is added to the div element:
Adaptive two-column layout
In rule 3 above, 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.
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { width: 200px; height: 200px; background: #fcc; } </style> <body> <div class="aside"></div> <div class="main"></div> </body> View Code
Because the two elements are in the same body, their left side is in contact with the body.
Then, according to rule 4, the BFC region does not overlap with the float region. We can trigger the BFC for main to implement the two-column layout. For example, add overflow to main: the effect of hiding is as follows:
Clear floating
According to rule 6, when calculating the BFC height, floating elements are also involved in calculation. Therefore, you can clear the floating according to this rule, as shown below:
<Style>. mydiv {border: 3px dashed # ddd; overflow: hidden ;}</style> <body> <div class = "mydiv"> <p style = "float: left "> I set the float attribute </p> </div> </body>
This also undertakes the principle of the float clearing floating BFC method in the previous section. In fact, the element BFC can be used. You can refer to the BFC generation rules.
5. Summary
For BFC, I think we mainly want to achieve some layout effects by mastering the BFC rules, and use the BFC rules to achieve our various purposes, such as clearing floating and removing margin overlaps.
The preceding examples also illustrate rule 5. BFC is an isolated independent container on the page. The child elements in the container do not affect the external elements.
The elements inside the BFC and the external elements do not affect each other, so this will make the BFC computing height contain a floating height, and also avoid the superposition of margin.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
