初看到css的这几个名词的时候觉得很神奇，用了这么久的css了竟然还有这么高深，这么神奇的概念。然后搜了一部分文章，有些文章就是连这几个名词的全称都不写，看完了通篇的一连串的讲解，觉得没啥内容，反而把自己搞的一头雾水了。
首先，先说明下这几个的概念。其实这几个都是一个布局的概念而已。
FC（Formatting Contexts）格式化内容，其实就是利用css添加样式布局而已。前面的B,I,G,F分别就是B（Block）块级，I(Inline)行内，G（GridLayout）网格，F（Flex），这样的话就明白多了。一个BFC也就是独立的一个块级元素，不会对其他元素内部的内容布局造成影响。
可以参考W3C说明（https://www.w3.org/TR/CSS2/visuren.html#block-formatting）。
FC也就是我们布局时候遵循的一些原则，一套渲染规则，一套决定这些布局元素，子元素，内容以及与其他元素相互作用的一些原则而已。其实布局我一直认为的首先，盒子模型是必须的，然后掌握浮动和定位来说，布局基本问题就不大了，当然现在又有了flex。具体的布局原则这里就不提了，
这里只提一下BFC也就是块级布局里的一个margin合并原则。
W3C里对margin合并的说明（CSS 外边距合并），说简单点就是在垂直相邻的元素之间会存在margin合并问题，符合合并原则的margin合并后是使用大的margin，如果不注意这个的话可能会在布局的时候发现自己写的一些margin不起作用，实际是合并了，如果不想合并的话就是在两个margin之间产生一些分隔就不会再合并了。
当然从根本上解决的话就是理解margin和padding，使用正确的属性也能避免合并的发生。下面这篇文章里对这个问题还是说的比较清楚的。
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
网友评论