標(biāo)準(zhǔn)流 normal flow

標(biāo)準(zhǔn)流實(shí)際上就是一個(gè)網(wǎng)頁(yè)內(nèi)標(biāo)簽元素正常排列的順序的意思；

比如塊級(jí)元素會(huì)獨(dú)占一行，行內(nèi)元素會(huì)按順序依次從左向右，從上向下排列；

按照這種大前提的布局排列之下絕對(duì)不會(huì)出現(xiàn)列外的情況叫做標(biāo)準(zhǔn)流布局，也稱做流式布局。

浮動(dòng)的本質(zhì)

就是word中圖片和文字混排

float: left;

總結(jié)：浮動(dòng)的元素會(huì)不占據(jù)標(biāo)準(zhǔn)流的空間。但是會(huì)影響標(biāo)準(zhǔn)流文字的排版

浮動(dòng)特性

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

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

3.一個(gè)父盒子里面的子盒子，如果其中一個(gè)子級(jí)有浮動(dòng)的，則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示

4.浮動(dòng)根據(jù)元素書寫的位置來(lái)顯示相應(yīng)的浮動(dòng)

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

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

父容器高度塌陷

如果一個(gè)標(biāo)準(zhǔn)中的盒子所有的子元素都進(jìn)了浮動(dòng)，而且盒子沒(méi)有設(shè)置高度，那么父容器整個(gè)高度會(huì)塌陷

overflow: hidden; ? 超出的部分進(jìn)行隱藏

當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí)，內(nèi)容就會(huì)溢出（IE6除外）,這時(shí)如果想要規(guī)范溢出內(nèi)容的顯示方式,就需要使用css的overflow屬性

visible:內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外（默認(rèn)值）

hidden:溢出內(nèi)容會(huì)被修剪，并且被修剪的內(nèi)容是不可見(jiàn)的

auto:在需要時(shí)產(chǎn)生滾動(dòng)條，即自適應(yīng)所要顯示的內(nèi)容

scroll:溢出內(nèi)容會(huì)被修剪，且瀏覽器會(huì)始終顯示滾動(dòng)條

補(bǔ)充BFC

overflow 可以觸發(fā)元素的BFC，可以讓元素具有獨(dú)立的排版的空間和權(quán)限，在bfc內(nèi)部所有的元素都依據(jù)父元素進(jìn)行排版和布局，所有父元素具有了包裹性，這就是解決高度塌陷問(wèn)題的原理

? 比如：浮動(dòng)也可以觸發(fā)bfc,再有 定位、overflow、display:table、table-cell...