博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
了解 BFC
阅读量:5883 次
发布时间:2019-06-19

本文共 1364 字,大约阅读时间需要 4 分钟。

  hot3.png

概念

MDN中的定义

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

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲,可以把 BFC 理解为一个封闭的盒子,盒子内部的元素无论如何排列,都不会影响到盒子外部其他的容器。

如何创建BFC

  • 根元素或包含根元素的元素
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 strict 的元素
  • 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  • 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中

BFC的特性及应用

同一个BFC下垂直边距会发生折叠

从效果上看,因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠,所以两个盒子之间距离只有 100px,而不是 200px。首先这不是 CSS 的 bug,我们可以理解为一种规范,如果想要避免外边距的重叠,可以将其放在不同的 BFC 容器中。

BFC可以包含浮动的元素(清除浮动)

浮动的元素会脱离文档流,如下示例:

我们可以使用将外层div创建为BFC,使其包含里层浮动元素,达到清除浮动的作用,当然,你也可以使用css clear属性来清浮动。如何创建BFC,可以参考上文所提到过的一些方法,这里我们通过给外层div设置overflow:hidden来创建一个BFC

转载于:https://my.oschina.net/cc4zj/blog/3005127

你可能感兴趣的文章
jsfl 添加代码
查看>>
ctype.h 字符分类与转换
查看>>
写在前面
查看>>
数据库设计时间字段
查看>>
shell文本操作
查看>>
CSS 中文字号、磅和像素对照关系
查看>>
PHP分页代码中的SQL语句可以换个写法
查看>>
加载样式js
查看>>
数据库之数据排序
查看>>
struts2将数据通过Json格式显示于EasyUI-datagrid数据表格
查看>>
牛客21天刷题_day#3
查看>>
Appium-We wanted {"required":["value"]} and you sent ["text","sessionId","id","value"]
查看>>
Classification Truth Table
查看>>
JVM学习:对象的创建和内存分配
查看>>
JavaScript基础精讲
查看>>
C++ 静态变量 全局变量 const
查看>>
vs 高级保存选项的设置
查看>>
Java读取文本指定的某一行内容的方法
查看>>
DLL编写中extern “C”和__stdcall的作用
查看>>
404页面
查看>>