bfc是什么,作用?触发条件?

170 阅读2分钟

BFC是什么

  • BFC全名Block Formatting Contexts:直译过来就是块级作用域执行上下文
  • 简单来说,就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素

规则

  • BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排列
  • BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签
  • 垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的标签外边距会发生重叠
  • 计算BFC的高度时,浮动元素也参与计算

如何产成 BFC

  • 根元素body
  • 脱离标准文档流动:设置float:left/rightpositionabsolute/flxed
  • overflow不为visible
  • displayinline-block/flex

BFC的作用

  • 1.解决margin塌陷(给塌陷元素各加上一个触发BFC的父元素)
css:
.block1,.block2{
    width: 100px;
    height: 100px;
    border: 1px solid;
    margin: 20px;
 }
 
html:
<div class="swrap" style="overflow:hidden">
     <div class="block1"></div>
</div>
<div class="swrap" style="overflow:hidden">
     <div class="block2"></div>
</div>
  • 2.解决float导致的高度塌陷
css:
.float{
     overflow: hidden;
 }
.left{
     width: 100px;
     height: 100px;
     border: 1px solid;
     float: left;
  }
.right{
     width: 100px;
     height: 100px;
     border: 1px solid;
     float: right;
  }
html:
<div class="float">
     <div class="left"></div>
     <div class="right"></div>
</div>
  • 3.实现两栏布局
css:
.left {
     width: 100px;
     height: 100px;
     border: 1px solid;
     float: left;
}

.content {
    border: 1px solid;
    overflow: hidden;
}
html:
<div class="left"></div>
<div class="content">BFC 全称:Block Formatting Context, 名为 "块级格式化上下文"。
        W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。
        简单来说就是,BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢,BFC可以看做是一个CSS元素属性
</div>