BFC 是什么东西?

BFC 是页面元素的隐藏属性,全称 : Block Formatting Context

作用: 可以清除子元素浮动后不良效果
在线效果地址:https://codepen.io/flyingliao/pen/VwwmaqK?editors=1100

效果图(未开启BFC):

BFC 是什么东西?

 

 效果图(开启BFC):

BFC 是什么东西?

 

 代码:

<div id="father">
  <div class="son"></div>
</div>
#father{
  width: 400px;
  border: 10px solid red;
  overflow: hidden; 
  zoom: 1;
}
#father .son{
  width: 150px;
  height: 150px;
  float: right;  /* 子元素浮动 */
  background-color: blue;
}

 

上一篇:大厂面试官问你知道final、finally、finalize有什么区别?


下一篇:JVM中GC 的工作原理(面试必备)