CSS清除浮動方法小結
我要評論1、設置父元素高度
如果一個元素要浮動,那么它的祖先元素一定要有高度.高度的盒子,才能關住浮動
只要浮動在一個有高度的盒子中,那么這個浮動就不會影響后面的浮動元素.所以就是清除浮動帶來的影響了.
弊端：工作上，我們絕對不會給所有的盒子加高度，這是因為麻煩，并且不能適應頁面的快速變化。
2、overflow
撐起父元素的高度
一個父親不能被自己浮動的兒子撐出高度。但是，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了。
overflow:hidden;能夠讓margin生效。
overflow:hidden; overflow:auto;
弊端：如果有溢出要顯示的內容，也都同時給隱藏了。
3、增加子元素（塊級），并且設置其clear屬性值為both來解決
<div>
<p></p>
<p></p>
<p></p>
</div>
<div> → clear:both;
<p></p>
<p></p>
<p></p>
</div>
最簡單的清除浮動的方法，就是給盒子增加clear:both；表示自己的內部元素，不受其他盒子的影響。
弊端：就是margin失效。兩個div之間，沒有任何的間隙了。
3.1、隔墻法：
在兩部分浮動元素中間，建一個墻。隔開兩部分浮動，讓后面的浮動元素，不去追前面的浮動元素。
墻用自己的身體當做了間隙。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div class="clear"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
我們發(fā)現(xiàn)，隔墻法好用，但是第一個div，還是沒有高度。如果我們現(xiàn)在想讓第一個div，自動的根據(jù)自己的兒子，撐出高度。
3.2、內墻法：
<div>
<p></p>
<p></p>
<p></p>
<div class="clear"></div>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
內墻法的優(yōu)點就是，不僅僅能夠讓后部分的p不去追前部分的p了，并且能把第一個div撐出高度。
這樣，這個div的背景、邊框就能夠根據(jù)p的高度來撐開
4、使用after或before偽對象清除浮動
div:after{content:"";display:block;clear:both;}
div:before{content:"";display:block;clear:both;}
這種方式用的比較多，在項目中建議使用這種方式
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要介紹了清除css浮動的三種方法小結,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-19- 這篇文章主要介紹了詳解css清除浮動float的七種常用方法總結和兼容性處理,非常具有實用價值，需要的朋友可以參考下2017-09-11
這篇文章主要介紹了淺談css中浮動和清除浮動帶來的影響，通過代碼示例和圖片展示詳細介紹講解了浮動的應用和實現(xiàn)效果,需要的朋友可以參考下2017-08-14詳解CSS中zoom屬性或overflow:auto屬性清除浮動的作用
這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動的作用,文中通過實例代碼介紹的很詳細，相信會對大家的理解和學習具有一定的參考借鑒價值，有需要的朋2016-11-26- 在大家在使用css的過程中，多多少少會遇到清除浮動這個問題。所以這篇文章給大家總結了div+css中關于清除浮動塌陷的4種方法，相信會對大家學習或者使用div+css能有所幫助，2016-10-17
- 下面小編就為大家?guī)硪黄獪\談CSS中的clear清除浮動。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
- 這篇文章主要介紹了CSS清除浮動的方法詳解,值得注意的是并不是每次單純把浮動清除掉就可以解決相關問題,文中最后談到的閉合浮動的方案也非常值得一試,需要的朋友可以參考下2016-05-30
CSS浮動所產(chǎn)生的內容溢出問題及清除浮動的方法小結
CSS的float浮動效果在一些情況下非常不穩(wěn)定,控制不好的時候一般還是清除浮動為妙,這里我們就來看一下CSS浮動所差生的內容溢出問題及清除浮動的方法小結2016-05-30- 下面小編就為大家?guī)硪黄狣IV+CSS 清除浮動常用方法總結。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-06
這篇文章主要介紹了Css實現(xiàn)清除浮動的方法匯總,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-11
