BFC application scenarios

Margin applies to child elements outside of parent elements

Margin transfer problem

Before triggering the BFC:

<div style="width: 300px ; height:300px; background-color:blue"> <div style="width: 200px; height: 200px; background-color: yellow;" > <div style="width: 100px; height: 100px ; background-color:red ; margin-top:30px ;" ></div> </div> </div>Copy the code

The BFC is triggered on the parent element

  • Set up the BFC so that the elements inside the BFC will not affect the outside individual, right
<div style="width: 300px ; height:300px; background-color:blue;" > <div style="width: 200px; height: 200px; background-color: yellow; overflow: hidden;" > <div style="width: 100px; height: 100px ; background-color:red ; margin-top:30px ;" ></div> </div> </div>Copy the code

Margin overlay problem

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Box-sizing: border-box! Important; word-wrap: break-word! Important; "> < span style>. height: 200px; background-color:red; margin-bottom:50px; */ * margin-bottom:100px; */ } .box2{ width: 200px; height: 200px; background-color:yellow; margin-top: 50px; } .box{ overflow: hidden; /*inline-block; */ /* display: inline-block; */ /* display:flex; */ /* float: left; */ /* position: absolute; </style> </head> <body> <! -- <div class="box1"></div> <div class="box2"></div> --> <! Instead of adding --> <! -- <div style="overflow: hidden;" > <div class="box1"></div> <div class="box2"></div> </div> --> <! Respectively - but as a whole - > < div class = "box" > < div class = "box1" > < / div > < / div > < div class = "box" > < div class = "box2" > < / div > < / div > </body> </html>Copy the code

Solve the float problem

The child element is a floating parent element whose height is content spread-open

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> <title>Document</title> <style>. background-color: red; border: 1px solid green; } .son{ width: 100px; height: 100px; background-color: yellow; float:left; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>Copy the code

Parent plus:

overflow: hidden; /* display: inline-block; */ /* position: absolute; * /Copy the code

Resolving coverage issues

This is a two-column layout suitable for doing background management system

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title>Document</title> <style>. height: 400px; background-color: red; float: left; } .div2{ height: 400px; background-color: blue; overflow: hidden; } </style> </head> <body> <div class="div1"></div> <div class="div2"> </html>Copy the code