1. overview
Block formatting context (BFC) is a part of visual CSS rendering of Web page. It is the area where the layout process of block box occurs, and the area where floating elements interact with other elements.
An independent BFC will contain all internal child elements, and will not affect the layout and interaction of other elements.
Based on the sub elements in the same BFC, the outer margin between the two sub elements will be folded up and down. One way to avoid this situation is to set one of the sub elements to BFC and then set the outer margin between the inner elements of the sub elements.
2. Properties that can be created as BFC:
1. Root element (< HTML >) 2. Floating element () 3. Absolute positioning element () 4. Inline block element () 5. Table cell () 6. Table title () 7. Anonymous table cell element 8. Block element whose overflow value is not visible () 9. The element whose display value is flow root (flow root can be understood as the context similar to html root element, no side effect, preferred) () 10. The element with the value of contain as layout, content or paint () 11. Elastic element () 12. Grid element () 13. Multi row containers (not verified, use with caution)3. example
3.1 the parent contains floating elements, so there is no problem of passing through the bottom of the parentcss code
* { margin: 0; padding: 0; } .container { border: 5px solid red; /* float: left; */ /* position: absolute; */ /* position: fixed; */ /* display: inline-block; */ /* display: table-cell; */ /* display: table-caption; table Everything related is OK */ /* overflow: hidden; Non visible */ /* display: flow-root; Stream root (similar to html root element context) */ /* contain: layout; layout|content|paint Fine */ /* display: flex; */ /* display: inline-flex; */ /* display: grid; */ /* display: inline-grid; */ display: flow-root; /* No side effects, preferred */ } .float { float: left; background-color: cornflowerblue; color: black; font-size: 20px; height: 200px; } .normal { background-color: blueviolet; }
html code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>block formatting context </title> </head> <body> <div> <div>This is a floating element</div> <p>This is a right normal text.</p> </div> </body> </html>3.2 outer margin folding
css code
* { margin: 0; padding: 0; } .a { margin-bottom: 20px; background: lightcoral; } .b { margin-top: 20px; background: khaki; } .b-box { display: flow-root; }
html code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>block formatting context </title> </head> <body> <div>element A</div> <div> <div>element B</div> </div> </body> </html>
xiongxiaolin123 Published 62 original articles · praised 0 · visited 2122 Private letter follow