BFC和IFC

BFC

BFC概念

Block Formatting Context
块级格式化上下文，创建一个封闭环境，封闭环境与外界互不影响

• 内部盒子垂直方向
• 不与float重叠，BFC高度包括浮动元素
• 相邻margin重叠
• 内部盒子左侧接触

BFC的创建

• float:left|right
• overflow:hidden|auto|scroll
• position:absolute|fixed
• display:flex|inline-box

BFC的作用

1. 清除浮动

  <div style="width: 200px; height: 100px; background-color: pink; float: left;"></div>
  <div style="overflow:hidden">//这里设置BFC
    <div style="width: 250px; height: 100px; background-color: orange;"></div>
  </div>

2. 解决浮动产生的高度坍塌

  <div style="background-color: grey; border: 1px solid orange; 
  float: left;" >//设置BFC，还可以 position:fixed/overflow:hidden/display:inline-box
    <div style="float: left; width: 200px; height: 100px; background-color: blue;"></div>
  </div>

3. 解决外边距折叠的问题

  <div id="margin" style="background-color: grey;"></div>
  <div style="overflow: hidden;;">
    <div id="margin" style="background-color: blue;"></div>
  </div>
    <style>
    #margin {
      margin: 40px;
      width: 200px;
      height: 100px;
    }
  </style>

IFC

IFC概念

行内格式化上下文（Inline Formatting Context）
高度由行内的实际高度得到

IFC作用

1. 水平居中
   块级元素设为inline-block在外层产生IFC，再设置text-align:center
2. 垂直居中
   块级元素设置inline-block在外层产生IFC，再设置vertical-align:middle