CSS如何清除浮動?本篇文章為大家介紹一下使用CSS清除浮動的3種方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
首先這裡就不講為什麼我們要清楚浮動,反正不清除浮動事多多。
下面我就講三種常用清除浮動的方法,夠用了。
1、在浮動元素後面加上一個空的div,並為它清除浮動
##html程式碼:<div class="wrap"> <div class="float">浮动</div> <div class="clear"></div> <div class="nofloat">不想被浮动影响</div> </div>css程式碼:
.wrap{ width:500px; height:400px; border:1px solid red; margin:0 auto; } .float{ width:200px; height:200px; background:#ccc; float:left; } .nofloat{ width:300px; height:150px; background:red; }現在雖然加了一個空的div,但是並沒有給它清除浮動,所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。 #OK,現在給.clear加上清除浮動:
.clear{ clear:both; }刷新一下效果就出來了: PS:這種情況比較適合元素之間是垂直排列佈局的,為了不受彼此浮動的影響。
2、利用BFC特性清除浮動
html程式碼:<div class="wrap"> <div class="float">浮动</div> <div class="nofloat">不想被浮动影响</div> </div>css程式碼:
.wrap{ width:500px; border:1px solid red; margin:0 auto; overflow:hidden; } .float{ width:200px; height:200px; background:#ccc; float:left; } .nofloat{ width:300px; height:150px; background:red; overflow:hidden; }效果是這樣的: 這裡父容器是沒有設定固定高度的,本來第一子元素浮動之後,父元素的高度會塌陷到跟第二個子元素一樣高,但由於這裡分別給第二個子元素和父元素都設定了overflow:hidden ,所以它們都產生了一個新的BFC區域,根據上文提供的BFC佈局規則可以得知:BFC區域不會與float box 重疊;計算BFC高度時浮動元素的高度也參與計算。所以就得到清除浮動的效果。說得比較繞,但其實清除浮動得根據自己開發中的實際情況合理使用。
3、使用:after偽元素,給浮動元素的父元素清除浮動
html程式碼:<div class="wrap"> <div class="float">浮动</div> </div>css程式碼:
.wrap{ width:500px; border:1px solid red; margin:0 auto; } .float{ width:200px; height:200px; background:#ccc; float:left; }此時子元素浮動了,脫離了文件流,所以父元素高度酒塌陷了: 可以看到父元素的邊框擠在一起了。 OK,現在為父元素新增一個clearfix類別:
<div class="wrap clearfix"> <div class="float">浮动</div> </div>
.clearfix{ *zoom:1; } .clearfix:after{ content:'clear'; display:block; height:0; clear:both; overflow:hidden; visibility:hidden; }現在刷新後的效果是:
##這種方法和BFC清除浮動個人用的比較多,實際開發中,其實這兩種就夠用了。
好的,清除浮動我也就簡單地提到這裡!
如果有錯誤的話,歡迎留言指正。
相關教學推薦:
CSS影片教學以上是CSS如何清除浮動? 3種方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!