摘要：比如说最常见的块级元素内联元素文档模型层叠样式模型盒子模型等，但还有一种规范经常会被排除在规范的认知之外。属于同一个的两个相邻的会发生重叠。计算的高度时，浮动元素也参与计算。垂直方向的距离由决定，利用这一点可以解决塌陷问题。
对于很多初学者来说，CSS是不讲“道理”的，但是如果去深究，会发现其实CSS是有一定道理的。
比如说最常见的块级元素、内联元素、文档模型、层叠样式模型、盒子模型CSS等，但还有一种FC规范经常会被排除在CSS规范的认知之外。
FC当然不是“Fuck”的意思，英文名是“Formatting Context”,也就是格式化上下文，他是页面中的一块渲染区域，在这个区域内，有一套独立的渲染规则，它决定了其子元素将如何布局，以及和其他元素的关系和相互作用，并且父级元素对它不能产生影响。
“FC”可以简单的理解为浏览器对于某个元素样式的一种处理方法，不能被开发者显式的修改，符合FC规则的会计元素元素的属性对于内部与外部元素会表现出一定的特性”。
FC分为BFC、IFC、FFC、GFC四种类型。其中FFC、GFC是CSS3中才有的类型，后面将一一进行讲解。
BFCBFC全称“Block Formatting Contexts”翻译过来就是“块级格式化上下文”。
符合以下任一条件即会生成一个“BFC”根元素，HTML
float属性不为none
overflow属性不为visible
display属性为inline-block、table-cell、table-caption
position属性为absolute或者fixed
还有其他条件也会触发BFC，这里只列了几种比较常见的情况，有兴趣的可以看一下MDN说明：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
BFC布局规则内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边， 与包含块border box的左边相接触，即使存在浮动也是如此。
BFC的区域不会与设置了float属性值的兄弟元素重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
下面通过几个例子，只需要几分钟可以明白BFC能帮我们做什么。
通过BFC清除浮动.f-l { float: left; }
.warp { border: 1px solid red; display: inline-block; }
.div-1 { width: 100px; height: 100px; background: green; }
.div-2 { width: 200px; height: 200px; background: yellow; }
最外层元素将“display”属性设置成了“inline-block”，隐性的形成了BFC。
BFC中的元素计算高度时浮动元素也是会参与计算的，达到了清除浮动的效果。
.warp { background: black; display: inline-block; width: 200px; height: 200px; }
.div-1 { margin-top: 20px; width: 100px; height: 100px; background: green; }
如果不符合BFC规范，会产生下面的效果，也就是“margin塌陷”。
所谓“margin塌陷”就是指CSS规则中，父元素与子元素顶部起始点在未加margin前是同一坐标的情况下，子元素的margin会影响父元素。
Box垂直方向的距离由margin决定，利用这一点可以解决margin塌陷问题。
.warp { border: 1px solid red; }
.left { float: left; width: 150px; height: 200px; background: green; }
.right { overflow: hidden; height: 200px; background: yellow; }
BFC的区域不会与设置了float属性值的兄弟元素重叠。
利用这一点可以轻松的实现经典左右布局。
利用BFC还可以做很多其他的事情，例如：元素间上下margin间距问题、浮动元素高度计算问题
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114336.html
摘要：属性，会破坏文档流，与非定位元素很难结合起来用，因此也不适合自适应布局。，其对无感，无法自适应剩余浏览器空间。总结的定义，就如同结界一样，完全封闭对外无任何影响。引起的各种属性与自适应布局自适应布局与属性说明 BFC的定义 BFC的全称是block formatting context（块状格式化上下文），当BFC起作用的时候，其元素内部无论怎么翻江倒海都不会影响到外部元素，同样，外部...
摘要：官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块，同时又是的包含块，不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为，则其使用的值来自相等。 作者：陈大鱼头 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...
摘要：必须表现为一块一块的，才能给出一个隔离的空间。触发的具体条件光有的潜质，不代表就直接会触发。最后，一般设置最常用的就是给盒子加上因为这样的写法基本上不会对原有的其他样式产生影响。BFC 即为Block formatting context 的缩写，BFC 主要用来将一个盒子设置为一个隔离的容器，不管盒子内部的元素具有什么属性，都不会影响到盒子的外面。 1、哪些元素能产生BFC 不是所有的元素...
摘要：通过格式化上下文后可以将脱离了普通流的元素隔离，使其不会与外界的元素相互隔离。第一次写，写得不好请大家多多指教哈哈哈哈 首先回顾下CSS常出现的几个样式问题1当子元素添加上边距时，父元素也会向下移动 showImg(https://segmentfault.com/img/bV6tGz?w=361&h=366); 解决方法:给子元素添加display:inline-block;或者用父...
摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...
阅读 865·2021-09-03 10:42
阅读 1475·2019-08-30 15:56
阅读 1419·2019-08-29 17:27
阅读 857·2019-08-29 15:25
阅读 3120·2019-08-26 18:27
阅读 2453·2019-08-26 13:41
阅读 1863·2019-08-26 10:39
阅读 1439·2019-08-23 18:36
