浅谈css的BFC

·  阅读 822

什么是BFC

BFC(Block Formatting Context)全名叫块级格式化上下文。它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。

怎么形成BFC

BFC的形成一般可以有以下几种方式

  • 根元素
  • position为absolute、fixed
  • float元素
  • overflow不为visible
  • dispaly为 inline-block、flex、table-cell

BFC有什么特点

  • 垂直方向上自上而下排列,和文档流的方向一致
  • 每个元素的margin box的左边,与容器块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
  • BFC容器是一个独立的区域,内部元素和外部元素互不影响。
  • 浮动元素不与BFC元素相叠加
  • BFC计算高度时,需要把浮动元素也计算在内

用来做什么

解决margin重叠问题

根据BFC容器是一个独立的区域,内部元素和外部元素互不影响。这一特性,可以解决margin重叠问题

<div class="first-block"></div>
<div class="second-block">
    <p>解决margin重叠问题</p>
</div>
复制代码
.first-block {
    display: inline-block; // 形成BFC
    background: #F44336;
    width: 200px;
    height: 200px;
}
.second-block {
    background: #00BCD4;
    width: 200px;
    height: 200px;
}
复制代码

默认情况下由于margin有重叠问题,所以两盒子的距离为60px。 但是我们给第一个盒子添加display: inline-block;样式后,就形成了BFC,然后根据BFC容器是一个独立的区域,内部元素和外部元素互不影响这一特性,这时两盒子的距离为100px

解决高度塌陷问题

根据BFC计算高度时,需要把浮动元素也计算在内,可以解决因浮动而导致的高度塌陷问题。只需在浮动元素外层的元素上加overflow:hidden 的样式。

自适应两栏布局

<div class="first-block"></div>
<div class="second-block">
    默认情况
</div>
复制代码
.first-block {
  background: #F44336;
  width: 50px;
  height: 100px;
  margin-bottom: 60px;
  float: left;
}
.second-block {
    background: #00BCD4;
    width: 100px;
    height: 200px;
    overflow:hidden;
}
复制代码

默认情况下浮动元素会和其它元素层叠,这时给second-block添加overflow:hidden;形成BFC,根据BFC不和浮动元素叠加特性,就可以做自适应两栏布局。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改