Two layout block-level format contexts

Two classic layouts

The holy grail layout

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> *{margin:0; padding:0; } body{ min-width:600px; } .container{ height:500px; padding:0 200px; box-sizing: border-box; } .container>div{ height:100%; float:left; } .main{ width:100%; background:pink; } .left{ width:200px; background:lightblue; margin-left:-100%; position:relative; left:-200px; } .right{ width:200px; background:lawngreen; margin-left:-200px; position:relative; left:200px; } </style> </head> <body> <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>Copy the code

Twin wing layout

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> *{margin:0; padding:0; } body{ min-width:600px; } .contain{ height:500px; } .contain>div{ height:100%; float:left; } .main{ width:100%; padding:0 200px; background:pink; box-sizing: border-box; } .left{ width:200px; background:green; margin-left:-100%; } .right{ width:200px; background:hotpink; margin-left:-200px; } </style> </head> <body> <div class="contain"> <div class="main"> <div class="inner"> inner </div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>Copy the code

Block-level format context

Definition: Block Formatting Context (BFC) is an independent rendering area that defines the layout of normal flow Block boxes in this area. Different BFC’s that don’t interfere with each other when rendering

  • A regular flow block box, in the horizontal direction, must fill the containing block (that is, the width of the inherited parent)
  • Normal flow block boxes, in terms of arrangement, are arranged up and down (characteristic of block-level elements)
  • Normal flow block boxes, if seamlessly adjacent, margin merge (margin penetration)
  • The automatic height and placement of conventional flow block boxes ignores the float element

Conditions for BFC generation

  1. Root element: HTML
  2. Floating and positioning elements (positioning fixed and absolute positioning)
  3. Overflow does not equal visible
  4. Display: Inline-block, table-cell, table-caption;