有关BFC

时间 2020-08-30

标签有关 bfc 繁體版

原文原文链接

师傅今天的每日一题是BFC，而后我就屁颠屁颠过去查了。只是查的资料上的一些内容，BFC在应用中频繁遇到。

第一，先了解什么是BFC（Box Formatting context),formatting context是一个决定如何渲染文档的容器。所以box的元素会以不一样的方式渲染。

block-level box:display属性为block,list-item,table的元素，会生成block-level box。并参与block fomatting context.

inline-level box:display属性为inline,inline-block,inline-table的元素，会生成inline-level block。并参与inline formatting context.

Foematting context是一面中一块渲染区域，并有一套渲染规则，他决定了其子元素如何定位，以及和其余元素的关系和相互做用。

BFC 译为块级格式化上下文，他是一个独立的渲染区域，他规定了内部的block-level box 如何布局，而且与这个区域外部绝不相干。

BFC布局规则：

1，内部的box会在垂直方向，一个接一个放置。

2,box垂直方向的距离有margin决定。属于同一个BFC的两个相邻的margin会发生重叠。

3，每一个元素的margin box的左边，与包含块的左边相接触，即便存在浮动也是如此。

4.，BFC的区域不予float box重叠。

5， BFC就是页面上一个独立的容器，容器里面的子元素不影响到外面的元素。

6，计算BFC的高度时，浮动元素也参与计算。

二，哪些元素会生成BFC？

1，根元素

2，float属性不为none

3，position为absolute或fixed

4，display为inline-block，table-cell,table-caption,flex,inline-flex

5,overflow不为visible

三，BFC的做用和原理

1，自适应两栏布局

body { width: 300px; position: relative; }

.aside { width: 100px; height: 150px; float: left; background: #f66; }

.main { height: 200px; background: #fcc; }

根据BFC第三条，即便存在浮动，每一个元素margin box左边，与包含块左边相接处。

因此就算存在浮动元素.aside,main的做弊爱你依然

与包含块的左边相接触。

那么怎么作呢？根据BFC的区域不予float box重叠，经过出发main生成BFC来适应两栏自适应布局。

及.main{overflow:hidden;}

这个新的BFC不会与浮动的aside重叠，因此生成图以下。

2，清除内部浮动

以前只是知道能够overflow：hidden清除浮动，但具体原理不清楚。

.par { border: 5px solid #fcc; width: 300px; }

.child { border: 5px solid #f66; width:100px; height: 100px; float: left; }

根据第六条，咱们能够触发BFC，那么par在计算高度时，par内部child也参与计算。

代码：.par{ overflow:hidden;}

效果以下

3，防止垂直margin重叠

想防止垂直margin重叠的话，用两个不一样的容器去装，并出发该容器变成BFC。

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。由于 BFC内部的元素和外部的元素绝对不会互相影响，所以，当BFC外部存在浮动时，它不该该影响BFC内部Box 的布局，BFC会经过变窄，而不与浮动有重叠。一样的，当BFC内部有浮动时，为了避免影响外部元素的布局， BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

1. 关于BFC
2. 关于BFC跟NFC
3. BFC相关知识
4. 关于BFC理解
5. BFC的相关知识
6. BFC和IFC分别是什么？BFC有什么作用？
7. 有关对hasLayout和BFC（Block Formatting Contexts）的理解
8. 理解BFC以及BFC相关布局问题解决
9. BFC
10. bfc
更多相关文章...
• Rust 所有权 - RUST 教程
• 与传输层有关的基本知识 - TCP/IP教程
• NewSQL-TiDB相关
• 再有人问你分布式事务，把这篇扔给他