记CSS格式化上下文

2017-11-25 14:08:47来源:cnblogs.com作者:学友2000人点击

分享

fomatting context

引言

主要讲解的是BFC上下文

本文是查看 史上最全面、最透彻的BFC原理剖析 的笔记
所以不会详解BFC, 只是记录学习心得, 以及重要规则避免原文失效

简介

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互作用

  • Formatting context
  • Block fomatting context (BFC)
  • Inline formatting context (IFC)
  • grid formatting context (GFC) css3新增
  • flex formatting context (FFC) css3新增

BFC生成

  • 根元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption table也认为可以生成BFC,其实这里的主要原因在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC
  • position的值为absolute或fixed

BFC布局规则

  • 内部的Box会在垂直方向上一个接一个的放置
  • 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷),与方向无关。)
  • 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时,浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

防止上下margin重叠

Box垂直方向的距离由margin决定。属于同一个BFC(上例中是body根元素的BFC)的两个相邻Box的margin会发生重叠

只要2个边距元素不属于同一个BFC边距就不会重叠

清除浮动

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

只要浮动的父元素创建BFC就行了, 比如 display: table-cell;

自适应多列布局

BFC布局规则第3条

每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此

BFC布局规则第4条

BFC的区域不会与float box重叠

通过将每个元素创建BFC实现自适应多栏布局

微信扫一扫

第七城市微信公众平台