css中的bfc笔记

块状元素往往具有流体特性，在非浮动，非绝对定位的情况下，块状元素会水平充满整个容器。

    BFC，也就是块级格式化上下文（Block Formatting Contexts）。具有bfc特性的元素可以看做是隔离的独立容器，会形成一个封闭的上下文，内部元素的变化不会影响到外部元素。（突然理解了为什么overflow可以避免外边距合并以及有着清除浮动的作用）

常见的触发BFC的操作：

    float值不为none；

    overflow为auto，hidden，scroll；

    display的值为table-cell，table-capti，inline-block；

    position的值不为relative，static；

    body根元素。

    一般来说正常的两列自适应布局都是左栏浮动，在已知左栏宽度的情况下右栏调整margin。不过在不同的页面上由于左栏宽度可能不固定，右栏的margin也是多种多样，css写的就比较死板，做不到通用。

    div在和浮动元素当兄弟的时候，浮动元素往往会覆盖在div上，在普通流体元素div进行bfc以后，不会跟浮动元素产生交集，顺着浮动的边缘形成自己的一个封闭上下文。同时流体的性质得到了保留，也是一个比较完美的两栏自适应的方法。

bfc的自适应布局的优点就引用的张鑫旭老师的总结：

    1.自适应内容由于封闭，更健壮，容错性强。比方说，内部clear:both不会与兄弟float产生矛盾。而纯流体布局，clear:both会让后面内容无法和float元素在一个水平上，产生布局问题。

    2.自适应内容自动填满浮动以为区域，无需关心浮动元素宽度，可以整站大规模应用。而纯流体布局，需要大小不确定的margin/padding等值撑开合适间距，无法CSS组件化。