ChuChencheng / note

菜鸡零碎知识笔记
Creative Commons Zero v1.0 Universal
3 stars 0 forks source link

CSS BFC #20

Open ChuChencheng opened 4 years ago

ChuChencheng commented 4 years ago

概念

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

创建 BFC 的条件

满足以下条件之一即可:

特性

BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。

应用

防止外边距塌陷

同一个 BFC 下的元素会产生外边距塌陷,只要元素属于不同的 BFC 就能防止塌陷:

<div>
  <div style="width: 100px; height: 100px; border: 1px solid red; margin-bottom: 10px;"></div>
  <div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;"></div>
</div>

image

把其中一个 div 放入新创建的 BFC 中:

<div>
  <div style="overflow: hidden;">
    <div style="width: 100px; height: 100px; border: 1px solid red; margin-bottom: 10px;"></div>
  </div>
  <div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;"></div>
</div>

image

清除浮动

根据 BFC 的特性, BFC 的高度是把内部浮动的元素也计算进去的,因此本来内部元素浮动导致高度塌陷的问题,就可以用创建 BFC 的方式解决:

<div style="border: 1px solid blue;">
  <div style="width: 100px; height: 100px; border: 1px solid red; float: left;"></div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;">
</div>

image

让容器成为一个 BFC :

<div style="border: 1px solid blue; display: flow-root;">
  <div style="width: 100px; height: 100px; border: 1px solid red; float: left;"></div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;">
</div>

image

实现两栏布局

<div style="overflow: hidden; border: 1px solid red;">
  <div style="float: left; margin-right: 10px; width: 100px; height: 100px; border: 1px solid green;">
    侧边栏
  </div>
  <div style="height: 100px; overflow: hidden; border: 1px solid blue;">
    main
  </div>
</div>

image

参考