教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

為什么需要浮動？css浮動布局的特點是什么？

更新時間:2021年09月17日17時14分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

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


加了浮動之后的元素,會具有很多特性,需要我們掌握的：

　　1. 浮動元素會脫離標準流(脫標)。

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

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

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

　　1. 脫離標準普通流的控制(浮) 移動到指定位置(動), (俗稱脫標)

　　2. 浮動的盒子不再保留原先的位置

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

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

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

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

浮動元素經(jīng)常和標準流父級搭配使用

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


浮動布局注意點:
 一個元素浮動了，理論上其余的兄弟元素也要浮動。
一個盒子里面有多個子盒子，如果其中一個盒子浮動了，那么其他兄弟也應(yīng)該浮動，以防止引起問題。
浮動的盒子只會影響浮動盒子后面的標準流,不會影響前面的標準流.






猜你喜歡：

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

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

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

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

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

0 分享到：
和我們在線交談！