1、概念，全称是block format context，块级格式化上下文
2、触发条件
根元素 float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
3、应用场景
自适应两栏布局
<style> body { 300px; position: relative; } .aside { 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } </style> <body> <div class="aside"></div> <div class="main"></div> </body>
清除浮动
<style> .par { border: 5px solid #fcc; 300px; overflow:hidden; } .child { border: 5px solid #f66; 100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body>
防止垂直 margin 重叠
<style> p { color: #f55; background: #fcc; 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <p>Hehe</p> </body>