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