浮動屬性 浮動作用 浮動產生的問題 清浮動的方法
阿新 • • 發佈:2021-01-09
浮動
浮動
什麼是浮動?
標籤的浮動是指設定了浮動屬性的標籤會脫離標準流的控制,移動到其父標籤的指定位置
浮動屬性
-
float
-
left
-
right
-
none 預設
-
浮動的作用
-
圖文環繞
-
頁面佈局
浮動的問題
標籤浮動以後,脫離的正常文件流,導致父標籤無法被撐開,會影響後續正常佈局
清浮動的幾種方法
-
給浮動標籤的父標籤固定高度(不夠靈活)
-
在浮動標籤的最後加一個div(塊標籤),標籤本身不符動,且新增樣式 clear:both;(程式碼冗餘)
-
給父標籤加overflow屬性,overflow為visible以外的其他值時可以幫助實現
-
推薦方法:給浮動標籤的父標籤新增 .clearfix
-
.clearfix {
*zoom:1; //這是針對於IE6/7的
}
.clearfix:after {
content:"";
clear:both;
display:block;
}
-
偽元素
-
div:after {
}
//向當前元素的最後一個子元素後新增一個元素
div:before {
}
//向當前元素的第一個子元素前新增一個元素