在使用CSS時,我們有時會遇到需要清除浮動的情況。浮動元素是指一些比較獨立的元素,它們脫離了文檔流,在布局上表現得像浮動一樣。通常我們使用float屬性來設置一個元素的浮動屬性。
但是,浮動元素也會帶來一些問題。比如當它們高度不夠時,會影響下面的元素排列。此時,我們需要消除浮動的影響,讓它們重新回到文檔流中。以下是一些常見的消除浮動的方法。
.clearfix:after{ content:""; display:block; clear:both; height:0; overflow:hidden; visibility:hidden; } .clearfix{ zoom:1; }
這是一種利用:before/:after偽元素清除浮動的方法。我們給浮動元素的父元素添加一個.clearfix的樣式,樣式內部設置content為"",display為block,做到了在元素后面添上一個偽元素,它的高度為0,清除了浮動,并隱藏了該清除元素,使該偽元素不占據空間。
.clear{ clear:both; }
這種方法也是通過給元素添加一個樣式類名來達到清除浮動的目的。它的原理是給元素添加一個clear:both的樣式,表示該元素的前面的浮動元素都被清除了,它需要脫離該元素,重新回到文檔流中。
總之,消除浮動的方法有很多種。我們需要根據實際情況選擇適合的方法。這可以避免一些浮動的問題,并讓元素在頁面中更加美觀。
下一篇css 清除left