1. 程式人生 > >剛入門,對於浮動float的作用、影響和解決方案和它們的缺點

剛入門,對於浮動float的作用、影響和解決方案和它們的缺點

浮動的作用
1、是為了讓元素並排
2、轉換行級標籤成塊級標籤,使其可以設定寬高

使用浮動帶來的影響
脫離文件流,對其後面緊隨的元素產生影響,進行覆蓋,優先顯示

清除浮動解決方案
(1)浮上去的元素,給它設定float:left;讓它也浮動起來,但是它的結構便不是自然的結構了,不推薦
(2)在用完浮動的地方的後面建立一個空標籤,給空標籤設定一個屬性,clear:both;弊端:會造成標籤冗餘,不推薦
(3)在父級盒子裡設定超出隱藏,overflow:hidden;弊端:可能會對文件結構產生影響,如後期的特效,不推薦

(4)通過在用完浮動的盒子處建立偽類選擇器清除浮動,格式.box:after{content:"";display:block;clear:both;}推薦使用

浮動可以使行級標籤像塊級標籤一樣使用,有寬高並且並排

浮動能少用就儘量少用,因為用了浮動的元素已經脫離了文件流,在html裡面不再佔有空間並且顯示。會對後面緊跟著的元素再次影響覆蓋它。

什麼是文件流呢?   文件流就是元素在html裡面佔有實實在在的空間,對後面的元素不會產生影響

奮鬥

相關推薦

no