1.使用偽元素來清除浮動(:after,注意:作用於浮動元素的父親)
123
.clearfix:after
.clearfix
2.使用雙偽元素清除浮動
.clearfix:before,.clearfix:after
.clearfix
3.使用overflow來清除浮動(父級div定義)
overflow屬性共有三個屬性值:hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動,但切記不能使用visible值。
123
.over-flow
4.新增新的元素 、應用 clear:both;
在浮動的盒子之下再放乙個標籤,在這個標籤中使用clear:both,來清除浮動對頁面的影響.一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標籤,造成結構的混亂.
123
4.clear
清除浮動的幾種方法
1.浮動元素下加空div 為了統一樣式,我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動,可以不用對父級設定高度 也無需技術父級高...
清除浮動的幾種方法
當元素浮動時,他將不再處於普通文件流中,相當於浮在文件之上,不佔據空間,但是會縮短行寬,產生文字環繞的效果。浮動帶來的影響 1,父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流,不佔位,而後面的元素未脫離文件流導致後面的元...
清除浮動的幾種方法
style float left 為了解決container容器高度塌陷問題,我們必須清除浮動 第一種方法 在container元素後加上乙個空的div標籤,然後給設定乙個clear both的樣式 第二種方法 給container容器新增 overflow auto hidden樣式 第三張方法 ...