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>

 

上一篇:IfcReinforcingBarRoleEnum ifc 钢筋枚举


下一篇:BFC、IFC、GFC、FFC概念理解、布局规则、形成方法、用处浅析