1、html：流式布局

標(biāo)準(zhǔn)流：從左向右，從上往下（若是圖片則直接去下一行，若是文字則超出部分到下行進(jìn)行排列）

2、浮動(dòng)的本質(zhì)：解決圖片和文字并排的布局的樣式。

文字浮動(dòng)后，將不占文檔流，但是會(huì)影響標(biāo)準(zhǔn)流中文本的排版。下一個(gè)塊會(huì)直接占用此塊的位置。

3、浮動(dòng)的特性（重要）

（1）浮動(dòng)脫離標(biāo)準(zhǔn)流，不占位置，但會(huì)影響標(biāo)準(zhǔn)流，浮動(dòng)只有左右浮動(dòng)。

（2）浮動(dòng)的元素A排列位置，跟上一個(gè)元素有關(guān)系。如果上一個(gè)元素有浮動(dòng)則A元素頂部回合上一個(gè)元素頂部對(duì)齊，如果上一個(gè)元素是標(biāo)準(zhǔn)流，則A元素的頂部回合上一個(gè)元素的底部對(duì)齊。

（3）一個(gè)父盒子里面的子盒子，如果其中一個(gè)子集有浮動(dòng)的，則其他子集都要浮動(dòng)，這樣才能一行顯示。

（4）浮動(dòng)根據(jù)元素書寫的位置來顯示相應(yīng)的浮動(dòng)。

（5）元素添加浮動(dòng)后，如果沒有設(shè)置寬高，元素會(huì)具有行內(nèi)塊元素的特性，元素的大小完全取決于定義的大寫或者默認(rèn)的內(nèi)容多少，也就是具有了包裹性。

（6）浮動(dòng)具有破壞性，元素浮動(dòng)后，破壞原來正常的流布局，造成內(nèi)容塌陷。

4、overflow：auto ?上下的滾動(dòng)條 /scoll是左右滾動(dòng)條

補(bǔ)充：BFC

overflow可以觸發(fā)元素的BFC?？梢宰屧鼐哂歇?dú)立的空間和權(quán)限。 在bfc內(nèi)多有的元素依據(jù)父元素進(jìn)行排版和布局，所有父元素具有了包裹性，這就是解決空間塌陷的原理。