CSS - BFC 、 IFC 和经典布局

一、BFC

BFC(Block Formatting Context)块级格式化上下文。它是一个独立的渲染区域。

它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。

满足下列条件之一就可触发BFC

1. 根元素
2. float的值不为none
3. overflow的值不为visible（hidden、auto、scroll）
4. display的值为inline-block、table-cell、table-caption、flex
5. position的值为absolute或fixed

BFC布局

1. 内部的Box会在垂直方向，一个接一个地放置
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6. 计算BFC的高度时，浮动元素也参与计算

BFC的作用

1. 自适应两栏布局
2. 可以阻止同级元素被浮动元素覆盖
3. 可以包含浮动元素——清除内部浮动
4. 分属于不同的BFC时可以阻止margin重叠

注意：

margin重叠：
相邻元素又一个触发了BFC,相邻元素上下margin不会重叠，跟父元素是不是BFC布局无关

margin传递：
如果父元素没有padding和border,那么父元素的maring会和子元素的margin重叠，将父元素设置为BFC，就可以避免这种情况

二、IFC

IFC布局

1. 内联元素会在水平方向一个个地放置
2. IFC地高度是由最高盒子的高度决定地
3. 当一行不够放置的时候会自动切换到下一行
4. 内部元素水平方向的margin、padding、border有效，垂直方向上无效。

三、FFC

弹性布局(FFC-Flex Formattig-Contexts 自适应格式化上下文)

容器属性

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-item
6. align-content

项目属性

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

四、普通文档流

布局

1. 浮动的元素是不会被父级计算高度
2. 非浮动元素会覆盖浮动元素的位置
3. margin会传递给父级
4. 两个相邻元素上下margin会重叠

五、经典布局

CSS 有两个经典的布局-圣杯布局和双飞翼布局

他们的共同点

• 两侧宽度固定，中间宽度自适应
• 中间部分在DOM结构上优先，以便先行渲染
• 允许三列中的任意一列成为最高列

圣杯布局

#container {
    width: 500px;
    height: 500px;
    padding-left: 200px; 
    padding-right: 150px;
    background: gray;
}
#center {
    background: red;
    width: 100%;
    height: 100%;
}
#left {
    background: yellow;
    width: 200px;
    height: 100%;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
#right {
    background: green;
    width: 150px;
    height: 100%;
    margin-right: -150px; 
}
.column {
    float: left;
}

双飞翼布局

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

     

         
center
     
     
left
     
right
 

.wrap {
    width: 500px;
     height: 300px;
     background: gray;

 }
 #container {
     width: 100%;
     background: red;
 }
 #center {
     margin-left: 200px; 
     margin-right: 150px;
 }
 #left {
     background: yellow;
     width: 200px;
     margin-left: -100%;
 }
 #right {
     background: green;
     width: 150px;
     margin-right: -150px; 
 }
 .column {
     float: left;
     height: 100%;
 }

两者区别

圣杯布局有个问题，当面板的main部分比两边的子面板宽度小的时候，布局就会乱掉。因此也就有了双飞翼布局来克服这个问题。如果不增加任何标签，想实现更完美的布局非常困难，因此双飞翼布局在主面板上选择了添加一个标签。

1. 双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间
2. 圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题
3. 双飞翼布局不用设置相对布局，以及对应的left和right值。

六、圣杯布局三种方式

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。我们可以用浮动、定位以及flex这三种方式来实现

flex实现

   
left
   
center
   
right

#container {
    width: 500px;
    display: flex;
}
#left{
    background: red;
    flex:0 0 100px;
}
#center{
    flex:1;
    background: blue;
}
#right{
    background: red;
    flex:0 0 100px;
}

position 实现

         
left
         
center
         
right

#container {
   width: 500px;
    position: relative;
    padding-left: 100px;
    padding-right: 100px;
}
#left{
    background: red;
    width: 100px;
    position: absolute;
    left: 0;
    top: 0;
}
#center{
    background: blue;
    width: 100%;
}
#right{
    background: red;
    width: 100px;
    position: absolute;
    top: 0;
    right:0
}

float实现

    
center
    
left
    
right

#container > div {
    height: 100px;
    float: left;
}
#container {
    width: 500px;
}
#left{
    background: red;
    width: 100px;
    margin-left: -100%;
}
#center{
    background: blue;
    margin-left: 100px;
    margin-right: -100px;
}
#right{
    background: red;
    width: 100px;
    margin-right: -100px;
}

参考链接：
CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里？