摘要：下面就来介绍和的布局规则。布局规则原文整理为中文内部的会在垂直方向，一个接一个地放置。解决方案为加上使其形成，根据规则第六条，计算高度时就会计算的元素的高度，达到清除浮动影响的效果。并为这个外层元素设置，使其形成。
想要理解BFC与IFC，首先要理解另外两个概念：Box 和 FC（即 formatting context）。
Box一个页面是由很多个 Box 组成的，元素的类型和 display 属性决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context。
Block level的box会参与形成BFC，比如display值为block，list-item，table的元素。
Inline level的box会参与形成IFC，比如display值为inline，inline-table，inline-block的元素。
参考：W3C文档block-level
FC（Formatting Context）它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
常见的Formatting Context 有：Block Formatting Context（BFC | 块级格式化上下文） 和 Inline Formatting Context（IFC |行内格式化上下文）。
下面就来介绍IFC和BFC的布局规则。
IFC布局规则：BFC布局规则：在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。
W3C原文：
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the "margin" properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box"s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box"s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
整理为中文：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
参考：
W3C文档inline-formatting
W3C文档block-formatting
块级格式化上下文由以下之一创建：
根元素或其它包含它的元素
浮动 (元素的 float 不是 none)
绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
块级元素具有overflow ，且值不是 visible
整理到这儿，对于上面第4条产生了一个small small的疑问：为什么display: inline-block;的元素是inline level 的元素，参与形成IFC，却能创建BFC？
后来觉得答案是这样的：inline-block的元素的内部是一个BFC，但是它本身可以和其它inline元素一起形成IFC。
BFC用处 1. 清除浮动1 2
.wrap {
border: 2px solid yellow;
width: 250px;
}
section {
background-color: pink;
float: left;
width: 100px;
height: 100px;
}
可以看到，由于子元素都是浮动的，受浮动影响，边框为黄色的父元素的高度塌陷了。
解决方案：为 .wrap 加上 overflow: hidden;使其形成BFC，根据BFC规则第六条，计算高度时就会计算float的元素的高度，达到清除浮动影响的效果。
2. 布局：自适应两栏布局我是好多好多文字会换行的那种蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤
div {width: 200px;}
aside {
background-color: yellow;
float: left;
width: 100px;
height: 50px;
}
main {
background-color: pink;
}
可以看到右侧元素的一部分跑到了左侧元素下方。
解决方案：为main设置 overflow: hidden; 触发main元素的BFC，根据规则第4、5条，BFC的区域是独立的，不会与页面其他元素相互影响，且不会与float元素重叠，因此就可以形成两列自适应布局
3. 防止垂直margin合并1 2
section {
background-color: pink;
margin-bottom: 100px;
width: 100px;
height: 100px;
}
.bottom {
margin-top: 100px;
}
可以看到，明明.top和.bottom中间加起来有200px的margin值，但是我们只能看到100px。这是因为他们的外边距相遇发生了合并。
怎样解决：为其中一个元素的外面包裹一层元素。并为这个外层元素设置 overflow: hidden;，使其形成BFC。因为BFC内部是一个独立的容器，所以不会与外部相互影响，可以防止margin合并。
1 2
.wrap {
overflow: hidden;
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112045.html
摘要：的一些名词和概念用来帮你更明确地去描述世界的事物。具体信息可以参考盒模型的解释，这里暂且不作展开。的位置和大小时根据一个称为的边界进行计算的。其它情况，依据设定的值进行处理指定值最终表现值与指定值相同 CSS的一些名词和概念 用来帮你更明确地去描述HTML/CSS世界的事物。 box 在CSS中，一个元素就可以看作一个box。具体信息可以参考盒模型的解释，这里暂且不作展开。 conta...
摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。 作者：陈大鱼头 github： KRISACHAN 正常流 什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...
摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。 作者：陈大鱼头 github： KRISACHAN 正常流 什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...
摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...
摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...
阅读 3553·2021-11-12 10:36
阅读 3808·2021-09-22 15:48
阅读 3524·2019-08-30 15:54
阅读 2550·2019-08-29 16:44
阅读 2346·2019-08-29 16:08
阅读 2381·2019-08-29 16:06
阅读 1254·2019-08-29 15:21
阅读 3155·2019-08-29 12:39
