SOURCE

console 命令行工具 X clear

                    
>
console
<div>
  <div class="float"></div>
  <div class="main">BFC 即 Block Formatting Contexts (块级格式化上下文),它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。</div>
</div>
.float{
  width: 200px;
  height: 50px;
  background: skyblue;
  float: left;
}
.main{
  background: pink;
  height: 600px;
  /* overflow: hidden; */ /* 使其成为 BFC */
  
}