CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会开启一个独立的布局区域
元素开启BFC的特点 -开启BFC的元素不会被浮动的元素所覆盖 -开启BFC的元素子元素和父元素的外边距不会被重叠 -开启BFC的元素可以包含浮动的子元素
可以通过一些特殊的方式开启BFC
设置元素的浮动(不推荐)：
float:left将元素设置为行内块元素：（不推荐）
dispaly:inline-block;将元素的overflow设置为一个非visible的值： 常用方式是将元素设置为overflow：hidden 开启其BFC 以使其可以包含浮动的元素
overflow:hidden;当box1向左浮动后，下面的box2就自动上移，因为大小一样所以box1就将box2给遮住了。
如果不希望box1盖住box2，就给box2加一个overflow:hidden，开启box2的一个BFC，不被浮动的元素所覆盖。
<style> .box1{ width:200px; height:200px; background-color: #bfa; float:left; } .box2{ width:200px; height:200px; background-color:orange; overflow:hidden; } </style> <style> .box1{ width:200px; height:200px; background-color: #bfa; overflow:hidden; } .box3{ width:100px; height:100px; background-color:yellow; margin-top:100px; } </style> </head> <body> <div class="box1"> <div class="box3"></div> </div> </body>