點擊上方 "前端技術精選"?關注，星標或者置頂

12點00分準時推送，第一時間送達

作者：html中文網?| 編輯：前端妹

來源：html.cn/web/css/19613.html

前端技術精選(ID：FrontEndTech)第 55 次推文?圖源：百度上一篇：16個非常有用的CSS偽選擇器，你千萬不要錯過了！

往期最熱：

1、萬字長文！if我是前端團隊Leader，怎么制定前端協作規范？

2、Vue + Koa從零打造一個H5頁面可視化編輯器——Quark-h5

3、高階函數不會用？教你JS中最實用最牛掰的幾個高階函數用法

4、2020年大前端發展趨勢

5、美團旅行前端技術體系的思考與實踐

6、技巧：CSS實現一個粒子動效的按鈕

7、騰訊高級工程師：未來可期的TypeScript

正文

今天這篇文章給大家介紹3種CSS清除浮動的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

首先，這里就不講為什么我們要清楚浮動，反正不清除浮動事多多。下面我就講3種常用清除浮動的方法，夠用了。1、在浮動元素后面加一個空的div，并為它清除浮動html代碼：class="wrap"> class="float">浮動 class="clear"> class="nofloat">不想被浮動影響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代碼：class="wrap"> class="float">浮動 class="nofloat">不想被浮動影響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代碼：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類：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清除浮動的幾種方法的詳細內容。如果有什么錯誤的話，歡迎留言指正。

前端妹拍了拍你說：

記得戳小花花哦~

歷史回顧：JavaScript常用API合集匯總三年 Git 使用心得 & 常見問題整理字節跳動禁止中國員工訪問海外代碼庫；新Mac或使用蘋果自研芯片；微軟公布Windows Terminal 2.0路線圖何時使用TypeScript：常見場景的詳細介紹純CSS打造銀色MacBook Air(完整版)2020 年 6 月編程語言排行榜前端開發與架構師微信又升級!這個功能被“玩壞”,網友笑抽了...

喜歡本文的朋友們，歡迎長按下圖關注訂閱號前端技術精選

收看更多精彩內容

你在看嗎？一起成長

總結

以上是生活随笔為你收集整理的div为空的时候 浮动没有效果_3种CSS清除浮动的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。