对 BFC 规范(块级格式化上下文:block formatting context) 的理解 ?

本文阅读 1 分钟
首页 前端笔记 正文

BFC 规定了内部的 Block Box 如何布局。

定位方案:

  • 内部的 Box 会在垂直方向上一个接一个放置。
  • Box 垂直方向的距离由 margin 决定,属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
  • 每个元素的 margin box 的左边,与包含块 border box 的左边相接触。
  • BFC 的区域不会与 float box 重叠。
  • BFC 是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

计算 BFC 的高度时,浮动元素也会参与计算。

满足下列条件之一就可触发 BFC:

  • 1、根元素,即 html
  • 2、float 的值不为 none(默认)
  • 3、overflow 的值不为 visible(默认)
  • 4、display 的值为 inline-block、table-cell、table-caption
  • 5、position 的值为 absolute 或 fixed
解压密码: detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。

本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。

何时应当时用 padding 和 margin ?
« 上一篇 03-12
用 css 实现左侧宽度自适应,右侧固定宽度 ?
下一篇 » 03-12

发表评论