【CSS】7 頁面布局：浮動
時間：2023-09-27 20:48:01 | 來源：網(wǎng)站運營
時間：2023-09-27 20:48:01 來源：網(wǎng)站運營
【CSS】7 頁面布局：浮動：傳統(tǒng)網(wǎng)頁的3種布局方式：
- 普通流（標準流）：標簽按規(guī)定好的默認方式排列
- 浮動
- 定位
1、為什么需要浮動
浮動：很多網(wǎng)頁布局標準流不能實現(xiàn)的，可以用浮動來做，因為浮動可以改變元素標簽的默認排列方式i。
浮動最典型應(yīng)用，可以讓多個塊元素一行內(nèi)排列顯示。
網(wǎng)頁布局第一準則：
多個塊級元素縱向排列找標準流，橫向排列找浮動。
2、什么是浮動
float屬性用于創(chuàng)建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣
選擇器{float:屬性值;}3、浮動特性
（1）浮動元素會脫離標準（脫標）- 脫離標準流的控制（?。┮苿拥街付ㄎ恢茫▌樱?，（俗稱脫標）
- 浮動的盒子不再保留原先的位置，會被其他的標準流的盒子所占有
（2）浮動的元素會一行內(nèi)顯示并且元素頂部對齊如果多個盒子都設(shè)置了浮動，則它們會按照屬性值一行內(nèi)顯示并且頂端對齊排列。
注意浮動的元素相互靠在一起，沒有縫隙，如果父級元素裝不下這些浮動的盒子，會自動換行。
（3）浮動元素會具有行內(nèi)塊元素的特性任何元素添加浮動后都具有行內(nèi)塊元素相似的特性。
- 如果塊元素沒有設(shè)置寬度，默認和父級相同，添加浮動后，大小由內(nèi)容決定。
- 浮動的盒子中間是沒有縫隙的，緊挨著的
- 行內(nèi)元素同理
4、浮動元素經(jīng)常和標準流父級搭配使用
先用標準流的父元素排列上下位置，之后內(nèi)部子元素采取浮動排列左右位置，符合網(wǎng)頁布局第一準則。
- 浮動如果一個元素浮動了。理論上來講其余的兄弟元素也要浮動。
- 浮動的盒子只會影響它后面的標準流，不會影響前面的標準流。
5、清除浮動
由于父盒子不方便給高度時，子盒子浮動不占位置，導(dǎo)致父盒子高度為零，會影響下面的標準流盒子。所以要清除浮動。
清除浮動的本質(zhì)：- 清除浮動元素造成的影響
- 如果父元素有高度是不需要清除浮動的
- 清除浮動后，父元素會根據(jù)浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。
語法：
選擇器{clear:屬性值;}實際應(yīng)用中，幾乎只使用clear:both;清除浮動的策略：閉合浮動，只在父盒子內(nèi)部影響，不影響外面的其他盒子。
6、清除浮動的方法：
（1）額外標簽法（W3C推薦）
也稱隔墻法，在浮動標簽?zāi)┪布右粋€空標簽（必須是塊元素）。例如
<div style="clear:both"></div>- 優(yōu)點：書寫簡單
- 缺點：添加了許多無意義標簽
（2）給父級添加overflowoverflow:hidden;（3）:after 偽元素:after偽元素時額外標簽法的升級，也是給父元素添加
.clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden;}.clearfix{ /*IE6、7專有*/ *zoom:1;}- 優(yōu)點：沒有增加標簽，結(jié)構(gòu)更簡單
- 缺點：要照顧一些低版本瀏覽器
（4）雙偽元素清除浮動
也是給父級元素添加
.clearfix:before,.clearfix:after{ content:""; display:table;}.clearfix:after{ clear:both;}.clearfix{ *zoom:1;}方法（3）（4）許多大廠都在用
應(yīng)評論區(qū)小可愛的建議，添加：
在線咨詢
