float詳解 聖杯布局

2022-01-16 09:51:37 字數 4029 閱讀 8920

雖然現在有了flex彈性盒子模型，很多布局效果都可以通過flex盒子來實現，但由於flex盒子模型的相容性不容樂觀

ie至少要10才能支援flex，所以還是很有必要學習float流式布局的

正常的塊級元素的布局是這樣的：（文字代表元素的float屬性）

對於float布局要記住：

1.如果浮動元素的上乙個元素也是浮動，那麼該元素會與上乙個元素排列在同一行，如果行寬不夠，後面的元素會被擠到下一行

2.如果浮動元素的上乙個元素不是浮動，那麼該元素仍然處於上乙個元素的下方，根據浮動設定在左或者在右，而其本身也脫離普通流，後邊的元素會自動往上移動到上乙個普通流元素下方為止

對第二個元素設定float：left，因為紅色塊不是浮動，所以橙色塊仍在紅色塊下方，紫色塊會向上移動到紅色塊（普通流）下方為止

如果對紫色塊設定float：right，則紫色塊和橙色塊都會位於紅色塊（普通流）下方，而紫色塊相鄰的下乙個綠色塊也會向上移動到紅色塊（普通流）下方。

如果我們想讓綠色塊留在原本屬於他的一行而不向上移動，可以給他加上clear:both，這樣他就不會移動了

關於清除浮動：

1.清除浮動並不是說讓浮動元素回到文件流

2.清除浮動只會改變改元素自身的位置，並且只針對排在該元素前面的元素。目的是讓自己的左邊或者右邊沒有浮動元素

當然用clear做更多的事，比如我們不想讓紫色塊和橙色塊在同一行，可以在紫色塊上加clear：left

如果我們給綠色塊加的屬性不是clear：both，而是clear：left的話，紫色塊和綠色塊就在同一行了

比如我們給橙色塊加clear：right，紫色塊不加clear，則橙色塊和紫色塊在同一行，橙色塊的clear屬性不會影響到紫色塊：

高度坍塌：

如果子元素是浮動，而父元素內沒有其他內容，父元素的高度就會消失，我們可以通過設定border看到這個現象：

這個問題我們可以通過在父元素後面新增另外乙個普通流元素來解決，最簡單的就是用：after偽元素啦：

這樣就解決了高度坍塌的問題

所謂聖杯布局，即是兩邊定寬，而中間自適應的一種布局： 用到浮動、負邊距、相對定位，不新增額外標籤

html結構為：

<


div 


class 


= "header"


>header


div>


<


div 


class 


= "container"


>


<


div 


class 


= "left"


>left


div>


<


div 


class 


= "center"


>center


div>


<


div 


class 


= "right"


>right


div>


div>


<


div 


class 


= "footer"


>footer


div>
填好一些公用的樣式：

.header,


.footer.left,


.center,


.right.left.center.right
這時候頁面的結構為：

接下來我們想讓left和right各佔50px寬度，中間自適應：

.header,


.footer.container.left,


.center,


.right.left.center.right.footer
即修改了container左右padding:50px，center寬度100%，全部向左浮動，再加上left和margin等屬性使之排列在一行

我們希望中間部分的高度被內容撐開，但此時如果任意乙個的高度改變，其餘兩個的高度是不會變的：

這個問題我們可以通過padding補償發來解決：

.container.left,


.center,


.right
主要是修改外層container的overflow：hidden，給子元素乙個足夠大的padding並margin負值回來，就能夠同時改變高度了：

最終**：

<


style


>


.header,


.footer


.container


.left,


.center,


.right


.left


.center


.right


.footer


style


>


<


body


>


<


div 


id >


<


div 


class 


= "header"


>header


div>


<


div 


class 


= "container"


>


<


div 


class 


= "left"


>left


div>


<


div 


class 


= "center"


>center


div>


<


div 


class 


= "right"


>right


div>


div>


<


div 


class 


= "footer"


>footer


div>


div>


body


>
至此，就簡略的複習完了float和聖杯布局的基本知識點

聖杯布局詳解

樣式表很簡單，就是說你有乙個左邊的寬度為200px的列，右邊有乙個寬度為150px的列，中間的列自適應。核心的css 如下 這種方式能夠相容現在的許多主流瀏覽器，例如 safari,opera,firefox,and with the single rule hack at the bottom i...

css布局float浮動布局詳解

float屬性 頁面布局時主要採用 浮動 float 和定位 position 還有就是即不浮動也不定位的正常文件流結構三種 float屬性常用的語法是 float left right none 任何元素都可以被浮動，無論是塊元素div，ol，ul還是行內元素span strong都可以浮動，重要...

CSS布局 四 float詳解

因為float被設計出來的初衷是用於 文字環繞效果。即，乙個一段文字，float left之後，文字會環繞。阿斯利康大家啊勝利大街拉速度來喀什建檔立卡結算單 2.1.破壞性 首先大家來看兩個demo，如下圖。第乙個demo是乙個簡單不過的例子，顯示效果也很正常。第二個demo，唯一的區別就在於 加了...