What is BFC
BFC stands for Block Formatting Context. The BFC is a completely independent space (layout environment), so that the child elements in the space do not affect the layout of the outsideCopy the codeHow to trigger BFC(position, float, display, overflow)
# BFC position: Absolute; (width 100%) Position :fixed; Float :left; # BFC as narrow as possible (vertical margin does not overlap) display:inline-block display:inline-flex display:inline-grid display:inline-table display:table-caption float:left; # width 100% BFC display:flex; display:table; display:table-cell; overflow:hidden; overflow:auto; overflow:overlayCopy the codeThird, the BFC can solve those problems
1. Height collapse problem after using Float
Modify before:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style>. Box-sizing: border-box; word-wrap: break-word! Important; width: 100px; height: 100px; background: red; float: left; } .container { background: #000; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> </div> </body> </html>Copy the codeRevised:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style>. Box-sizing: border-box; word-wrap: break-word! Important; width: 100px; height: 100px; background: red; float: left; } .container { background: #000; display: inline-block; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> </div> </body> </html>Copy the code2. Margin overlap
Modify before:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <title>Document</title> <style>. Box-sizing: border-box; width: 100px; height: 100px; background: #000; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> </div> </body> </html>Copy the codeDirectly use the narrowest POSSIBLE BFC, after modification:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style>. Box-sizing: border-box; word-wrap: break-word! Important;" 10px; width: 100px; height: 100px; background: #000; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box" style="display:line-block" ></div> </div> </body> </html>Copy the codeNested layer, parent element is BFC, modified:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style>. Box-sizing: border-box; word-wrap: break-word! Important;" 10px; width: 100px; height: 100px; background: #000; } </style> </head> <body> <div class="container"> <div class="box"></div> <div style="display:flex"><div class="box"></div></div> </div> </body> </html>Copy the code3. Two-column layout
Modify before:
<! 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"> <title> height: 100px; border: 1px solid red; } </style> </head> <body> <div style="float: left;" <div style="width: 300px; max-width: 100%; </div> </body> </ HTML > </div> </body>Copy the codeRevised:
<! 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"> <title> height: 100px; border: 1px solid red; } </style> </head> <body> <div style="float: left;" "> <div style=" max-width: 100%; clear: both; display:flex;" </div> </body> </ HTML > </div> </body>Copy the code