web第5天
阿新 • • 發佈:2020-12-13
浮動
浮動
什麼是浮動?
標籤的浮動是指設定了浮動屬性的標籤會脫離標準流的控制,移動到其父標籤的指定位置
浮動屬性
-
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 { } //向當前元素的第一個子元素前新增一個元素