响应式与移动端-BFC


    最近浏览网站时候,发现一些之前没有想到的细节,之前只是一味地实现效果,按部就班,其实有的自己用过,现在开始归纳总结一下,沿用长辈的命名BFC。以我的方式总结在这里,方便以后查看。

BFC——块级格式化上下文(Block Formatting Context)。
BFC是什么?
    BFC是个独立渲染区域,它内部元素的布局与外部毫不相干,并且所有的BFC都遵守同一套布局规则(规则:BFC的区域不会与浮动Box重叠)。

BFC理解?
    比如,同一个BFC中上下两个相邻的Box在垂直方向的margin会发生重叠(或叫作塌陷);浮动和清除浮动这件事只对同一个BFC中的元素起作用;计算BFC的高度时,浮动元素也参与计算;

如何触发一个BFC呢?设置元素下列CSS属性之一就行:

例子一:两部分,左边固定,右边自适应


例子二:三部分,左边固定,中间自适应,右边固定
主体为:


参考:
http://www.codingserf.com/index.php/2014/08/responsive-and-mobile-3/


Carpe Diem and Do what I like