為什么需要浮動(dòng)？css浮動(dòng)布局的特點(diǎn)是什么？

網(wǎng)頁布局的本質(zhì)——用 CSS 來擺放盒子。普通流（標(biāo)準(zhǔn)流）、浮動(dòng)、定位是三種傳統(tǒng)的布局方式。有很多的布局效果，標(biāo)準(zhǔn)流沒有辦法完成，此時(shí)就可以利用浮動(dòng)完成布局。 因?yàn)楦?dòng)可以改變?cè)貥?biāo)簽?zāi)J(rèn)的排列方式，讓多個(gè)塊級(jí)元素一行內(nèi)排列顯示，控制多個(gè)盒子之間的間隙。
網(wǎng)頁布局第一準(zhǔn)則：多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)。利用float 屬性可以創(chuàng)建浮動(dòng)框，將其移動(dòng)到一邊，直到左邊緣或右邊緣觸及包含塊或另一個(gè)浮動(dòng)框的邊緣。
語法：

選擇器 { float: 屬性值; }

加了浮動(dòng)之后的元素,會(huì)具有很多特性,需要我們掌握的：

　　1. 浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流(脫標(biāo))。

　　1. 浮動(dòng)的元素會(huì)一行內(nèi)顯示并且元素頂部對(duì)齊。

　　2. 浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性。

設(shè)置了浮動(dòng)（float）的元素最重要特性：

　　1. 脫離標(biāo)準(zhǔn)普通流的控制(浮) 移動(dòng)到指定位置(動(dòng)), (俗稱脫標(biāo))

　　2. 浮動(dòng)的盒子不再保留原先的位置

　　3. 如果多個(gè)盒子都設(shè)置了浮動(dòng)，則它們會(huì)按照屬性值一行內(nèi)顯示并且頂端對(duì)齊排列。

注意： 浮動(dòng)的元素是互相貼靠在一起的(不會(huì)有縫隙)，如果父級(jí)寬度裝不下這些浮動(dòng)的盒子，多出的盒子會(huì)另起一行對(duì)齊。

3. 浮動(dòng)元素會(huì)具有行內(nèi)塊元素特性。

任何元素都可以浮動(dòng)。不管原先是什么模式的元素，添加浮動(dòng)之后具有行內(nèi)塊元素相似的特性。如果塊級(jí)盒子沒有設(shè)置寬度，默認(rèn)寬度和父級(jí)一樣寬，但是添加浮動(dòng)后，它的大小根據(jù)內(nèi)容來決定，浮動(dòng)的盒子中間是沒有縫隙的，是緊挨著一起的，行內(nèi)元素同理。

浮動(dòng)元素經(jīng)常和標(biāo)準(zhǔn)流父級(jí)搭配使用

為了約束浮動(dòng)元素位置, 我們網(wǎng)頁布局一般采取的策略是:先用標(biāo)準(zhǔn)流的父元素排列上下位置, 之后內(nèi)部子元素采取浮動(dòng)排列左右位置. 符合網(wǎng)頁布局第一準(zhǔn)側(cè).

猜你喜歡：

如何做數(shù)據(jù)分析，數(shù)據(jù)分析流程是什么?

什么是數(shù)據(jù)分析？有什么價(jià)值？

產(chǎn)品經(jīng)理為什么學(xué)習(xí)數(shù)據(jù)分析？

如何利用“戀愛心理”來運(yùn)營用戶?用戶運(yùn)營如何使用沉沒成本？

傳智教育產(chǎn)品經(jīng)理課程