CSS（五）BFC和IFC规范

全文手打，转载请注明出处

全文手打，转载请注明出处

全文手打，转载请注明出处

FC（Fomatting Context）：是页面中的一块渲染区域，有其渲染规则，决定其子元素将如何定位，以及和其他元素的关系和相互作用。

一）BFC规范（block）块级格式化上下文85

形成BFC条件：浮动元素（float除none以外的值）

                         定位元素（position的absolute / fixed）

                         display (值为inline-block / table-cell / table-caption)

                         overflow (值为hidden / auto / scroll)

BFC特性（规则）：内部的盒子会在垂直方向一个接一个放置

                  垂直方向的距离由margin决定

                  BFC的区域不会与float区域重叠

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

                  BFC就是页面上独立的容器，容器里面的子元素不会影响外面的元素

BFC作用：解决margin重叠的问题（添加独立BFC）特性5

                 解决浮动高度塌陷的问题（在父级添加overflow:hidden;）特性4

                  解决侵占浮动元素的问题（添加overflow:hidden;）特性4

//内部盒子会在垂直方向上一个接一个的放置
.box1,.box2{
  width: 200px;
  height: 300px;
  border: 1px solid red;
}

//垂直方向的距离由margin的最大值决定
.container{
  overflow: hidden;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.box1{
  height: 20px;
  margin: 10px 0;
}
.box2{
  height: 20px;          //叠加后，选最大的20px
  margin: 20px 0;
}

//③BFC独立的容器，容器里面的元素不会受到外面元素的影响
.wrapper{
   overflow: hidden;       //margin10+margin20=30px
}



<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

③
<div class="container">
  <div class="wrapper">
    <div class="box1"></div>       //把box1单独带出去
  </div>
  <div class="box2"></div>
</div>

 

二）IFC规范（inline）行级格式化上下文86

形成IFC条件：font-size  line-height  height  vertical-align(元素垂直对齐方式)

IFC特性（规则）：IFC元素会在一行上从左至右排列

                               在一行上的所有元素会在该区域形成一个行框

                               行宽的高度为含框的高度，高度为行框中最高元素的高度

                               浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度

                               行框的宽度容纳不下子元素时，子元素会换下一行显示，会产生新行框

                               行框的元素内遵循text-align和vertical-align

容器高度height=line-height+vertical-align

span{
  font-size:30px;
  background-color: #345;
  width: 200px;         //行级标签不识别宽高
  display: inline-block;     //让行级标签识别宽高，用display设成块级标签
  //display: block;
}
strong{
  font-size:16px;
  background-color: #888;
}
.box{
  float: left;
  font-size:50px;
}

<span>span</span>
<strong>strong</strong>
<em class="box">box</em>