What is BFC?
BFC(Block Formatting ContextAlso known as “block formatting context”.
Simply put, the BFC is a completely independent space (layout environment), so that the child elements in the space will not affect the layout outside, playing the role of isolation protection.
BFC is like a rule. Take 🌰 for example.
So how to solve various problems with BFC? I believe this is also the concern of friends!
2. What problems has BFC solved?
I use positioning to break away from the document flow to achieve a fixed role.Position: absolute or fixed
For example, if we go back to the Nuggets home page, we can see that the AD on the right is always in this position. It does not affect the layout of the outside, which is one of the ways to create the BFC.
Realization of two-column layoutOverflow: not visible; Display: inline - block or flex
This often causes background loss when implementing a two-column layout.
<! 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, Word-wrap: break-word! Important; "> < span style>.wrapper {background: url(./images/bg1.jpg); } img { width: 300px; /* float: left; */}.text {width: 300px; /* float: left; * /} < / style > < / head > < body > < div class = "wrapper" > < img SRC = "/ images/infusion. PNG" Alt = "" > < div class =" text "> < h2 > infusion is what stem < / h2 > < P > Yesterday, the national husband single-handedly lit up the whole of China. Is him, he is the fire in June, is the star in the night sky, is a man's dream, is Kris Wu. He was the man who single-handedly brought down the illusions of money and power, the man who showed other men that I was proud to lick dogs. Also he, with full of love, pulled down the female compatriots for the president and the fantasy of love, you think the overbearing president, in fact, is "miss you night". </p> </div> </div> </body> </html>Copy the code
float:leftFor text, it will be addedfloat:left.
Effect:
Remove the floatingSo as not to affect the outside layout.
To the parent element. Wrapper boxOverflow: autoIt’s ok to set hidden, scroll, etc., as long as it’s not visible.
See the effect:
ⅲ solve the problem of margin collapsedisplay:inline-block
<! 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"> < span style> * {margin: 0; padding: 0; } h1 { background-color: yellow; } p { background-color: yellow; } .wrapper { width: 100%; height: 400px; background-color: black; } .image { width: 100%; height: 300px; /* margin-top: 20px; */ } .wrapper img { height: 300px; <div class="image"> <div class="image"> <img SRC ="./images/ sunny1.jpg" "> <p style =" margin-bottom: 0pt; margin-bottom: 0pt; Sun's previous account, nicknamed "I killed a pig again", was discovered to have used it to swindle people and decided to withdraw from the network. Four years later, he issued an apology for his past behavior and admitted his mistakes. On June 5, 2021, Sun Yining made public anger by teasing a disabled old woman with her friends in the studio. Sun Yining uses the way to help the old people to vote with the interaction of the wheat, occasionally also brush gifts, but when the old people officially sing, Sun Yining a group of people on the noisy, frivolous, teasing "what kind of people can live? It scares me to death, "" We are now in a fairy state," and the old woman's ID is "fairy." [1] </p> </body> </html>Copy the code
.image {
margin-top:20px
}
Copy the codeEffect:
display:inline-block
.image {
display:inline-block
margin-top:20px
}
Copy the codeEffect:
conclusion
The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements. And vice versa. Here are some other ways to create BFC:
- Root element ()
- Floating elements (elements whose float is not None)
- Absolute positioning element (element position is absolute or fixed)
- Inline block elements (elements with inline-block display)
- Table cell (the display of the element is table-cell, which is the default value for HTML table cells)
- Table title (display table caption, HTML table title default)
- Anonymous table cell elements (the display of the element is table, table-row, table-row-group, table-header-group, and table-footer-group (respectively are HTML) Default properties for table, Row, tbody, thead, tfoot) or inline-table)
- Block elements whose overflow Computed value is not visible
- The display value is an element of flow-root
- Contain an element with a layout, Content, or Paint value
- Elastic elements (display is a direct child of a Flex or inline-Flex element)
- Grid element (display is a direct child of a Grid or inline-Grid element)
- Multi-column container (elements with column-count or column-width (en-us) not auto, including column-count 1)
- An element with column-span of all will always create a new BFC, even if the element is not wrapped in a multi-column container.
The extensions to read
- MDN-BFC
- Remove the floating
- Get a deeper understanding of margin collapse
conclusion
Writing is not easy, “like” + “comment” + “bookmark” thanks for supporting ❤