一、盒子模型
要理解BFC与IFC,首先要理解盒子模型,盒模型的结构如下:
从内到外依次为 content -> padding -> border -> margin
常见的盒模型氛围两种:标准盒模型和IE盒模型,我们可以用 box-sizing 属性进行切换
标准盒模型: box-sizing: content-box;
IE盒模型:box-sizing: border-box;
二、Box
一个页面是由很多html元素组成的,而这些元素都是一个接一个盒子堆叠起来的。下面以百度首页为例
浏览器控制台执行一下命令即可查看页面 box 的区块(红色线框)
[].forEach.call(document.querySelectorAll('*'), function(a){a.style.outline = "1px solid red";})
三、什么是BFC与IFC
1. BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用。
2. BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围
3. 在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 block ,或者是 inline ,但不能同时属于这两者。并且, Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化, Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化
四、如何产生BFC
当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context:
1. float的值不为none
2. overflow的值不为visible
3. display的值为table-cell, table-caption, inline-block中的任何一个
4. position的值不为relative和static
CSS3触发BFC方式则可以简单描述为:在元素定位非static,relative的情况下触发,float也是一种定位方式
五、BFC的作用与特点
不和浮动元素重叠,清除外部浮动,阻止浮动元素覆盖
注:下图盒子设置 margin:100px; 同一个BFC外边距会重叠
六、BFC 布局规则
1.内部的 box 会在垂直方向,一个接一个地放置。
2. box 垂直方向由 Margin 决定,属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠。
3. 每个元素的 margin box 的左边,与包含块 border box 的左边相接触。
4. BFC 的区域不会与 float box 重叠。
5. BFC 就是页面上的一个隔离容器,容器里的子元素不会影响外面的元素。
6. 计算 BFC 的高度时,浮动元素也参与计算。
如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个重叠的现象。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态,当float不为none时,position为absolute、fixed时元素将脱离标准流
七、IFC 布局规则
1. 子元素水平方向横向排列,并且垂直方向起点为元素顶部
2. 子元素只会计算横向样式空间,【padding、border、margin】,垂直方向样式空间不会被计算,【padding、border、margin】
3. 在垂直方向上,子元素会以不同形式来对齐(vertical-align)
4. float 元素优先排列
IFC 作用:解决元素垂直居中