本文共 4442 字，大约阅读时间需要 14 分钟。

���������������������BFC���������

������������������������BFC���Block Formatting Context������CSS������������������������������������������������������������������������������������BFC���������������������������������������������-layout������������������������������������������������������������������������BFC���������������������������������������

������������Normal Flow���

���������������������������������������������������������������������������HTML������������������������������������������������������������������������������������������������������������������������������������������������������������������������CSS������������������������������������������������������������������������������������������������������������unte������������������

���������

   
    ���������������1
   
���������������1
   
    ���������������2
   

������������������������������������������������������������������������������������������������������������������������������������������������������������������������

���������Float���

���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

���������������Absolute Positioning���

������������������������������������������������������������������������������������������������������������������������������������������������������top���bottom���left���right���������������������������������������������������������������������������������������������������������������������

���������������������������������������������������������������������������������������������������������������������������������������������������

������������������������BFC���

BFC���������������������������������������������������������������������������������������������������������������BFC���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

BFC���������������

������������������������������BFC���������

BFC������������������

BFC���������������������

BFC���������������

���������������������������

���������������������������������������������������BFC������������������������������������������������

.container { overflow: hidden; }
.son { 
  width: 100px; 
  height: 100px; 
  background: #4a90e2; 
  margin: 100px; 
}

���������������������container���������������������������������������������������������200px������������

Kakume BFC������������������������

���������BFC������������������������������������������������������������������������

.contain {
  width: 200px; 
  height: auto; 
  background: #87CEEB; 
  border: 2px solid #000; 
}
.float {
  float: left; 
  width: 100px; 
  height: 100px; 
  background: #D2691E; 
}

���������������overflow:hidden������������������������������������������������������������������������������������������overflow:hidden������������������������������������

���������������������������

���������������������������������������������������������������������Three-column layout������������������

.main {
  height: 600px; 
  background-color: #DCDCDC; 
  overflow: hidden;
}

���������������������������������������600px���������������������������������

������������������������������������������������������������������������������������������������������������������BFC���������������������������������������������������

������������������������������������������������������CSS���������������������������������������������������������������