其他分享
首页 > 其他分享> > 对 BFC 的理解

对 BFC 的理解

作者:互联网

定义

先来看两个相关的概念:

块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

通俗来讲:BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。

创建BFC的条件

满足下列任意一个条件,就可以创建出BFC。

BFC的特点:

BFC的用途

<style>
.parent {
  overflow: hidden;
}    
.top {
  margin-bottom: 10px;
  background-color: green;
  width: 150px;
}    
.bottom {
  margin-top: 10px;
  background-color: red;
  width: 150px;
}
</style>

<div class="parent">
  <div class="top">下外边距为10px</div>
</div>
<div class="bottom">上外边距为10px</div>

<style>
.parent {
  overflow: hidden;
  width: 150px;
  background-color: green;
}
.child {
  float: left;
  background-color: red;
  width: 100px;
  height: 30px;
}
</style>

<div class="parent">高度塌陷
  <div class="child">float</div>
</div>

 

<style>
.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; } </style> <div class="left"></div> <div class="right"></div>

右侧设置overflow: hidden,就触发了BFC,BFC的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠,实现了自适应两栏布局。

标签:BFC,元素,理解,background,hidden,margin,overflow
来源: https://www.cnblogs.com/HuiTaiLang1216/p/15967225.html