【无标题】BFC的一些笔记

前言：熟悉BFC的规则能更好地理解某些元素布局/bug为什么这样那样

在阅读之前 我们得明白浮动和定位跟文档流有什么大致关系，才能更好理解BFC规则及其应用。例：清除浮动----float_left会使父元素高度为0，当给父元素overflow_hideen后，触发BFC，在计算父元素高度时子浮动元素的高度也被包含在内，从而清除高度塌陷。（所以清除浮动除了大家常说的四种方法，还有许多由BFC衍生出来的方法呢~）

一、关于文档流的描述以及一些词汇解读

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

本菜鸟翻译：正常流中的盒子属于格式化上下文（就是BFC中的FC），可以是块级的或内联的，但不能同时是两个。块级盒子参与块格式上下文；内联盒子参与内联格式上下文。

• 流

之前一直很费解文档流为什么要用“流”来形容，读了张鑫旭的博客豁然开朗。div元素默认情况下会自适应大小 ，即块级元素具有流体特性，所以 你懂的~

• FC（Formatting context）-格式化上下文 

FC是页面中的一块渲染区域，一个决定如何渲染文档的容器，有自己的渲染规则。

BFC通俗的说，就是一种布局特性。

二、BFC(Block formatting context)-块级格式化上下文

1、BFC定义

2、哪些元素会成为BFC（重点）

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

3、BFC布局规则

     ① 内部的Box会在垂直方向，一个接一个地放置。

     ② Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

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

        但是浮动元素与浮动元素之间不会存在这个问题   

          

 

 

④ BFC的区域不会与float box重叠。

我觉得这个不一定 position:absoulte的盒子会压住float盒子

⑤ BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

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

4.BFC的作用

• 清除浮动----规则⑥⑤
• 自适应布局----规则③④⑤
• 防止margin重叠----规则②⑤

总结

emmm 了解得还不够透彻，主要是在实践过程中发现这些规则并不是时时刻刻都有效的，我猜是元素本身的某些属性优先级大于BFC渲染规则？？以后有了更深的理解再改改文章