为了梦想开始历练之清除浮动篇
目錄
前言
開篇
中篇
原因
解決方式
1額外標(biāo)簽得方法
2觸發(fā)BFC overflow
3偽元素
4雙偽元素
結(jié)尾
前言
師傅（路人甲）+小徒弟（路人乙）,自從路人乙昨晚沒有被叫去擺地?cái)傊蟆Ｔ缟弦黄鸫?/span>
路人甲:徒兒，昨晚休息得如何
路人乙:師傅，休息得不錯(cuò)。
路人甲:你去后山得秘境修煉一番，會(huì)遇到一些困難挫折
路人乙:好的師傅
開篇
說著就屁顛屁顛得來到了后山，守門得是一致巨獸(路人丙）
路人丙:你個(gè)小娃娃，要想從我這里過，需要回答一個(gè)問題
路人乙:你說，我保證能答得上
路人丙:清除浮動(dòng)得常見方法有哪些，有什么優(yōu)缺點(diǎn)
路人乙:這種問題有什么意義呢
路人丙:
清除浮動(dòng)得原因
清除浮動(dòng)主要是為了解決，父元素因?yàn)樽蛹?jí)元素浮動(dòng)引起的內(nèi)部高度為0的問題
那么如何解決這個(gè)問題呢
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>#container {border: 1px solid red;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;} </style><body><div id="container"><div id="tudi">徒弟</div><div id="jushou">巨獸</div></div><div id="shifu">師傅</div> </body></html>中篇
路人乙:第一種方式
額外加標(biāo)簽
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>#container {border: 1px solid red;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;} </style><body><div id="container"><div id="tudi">徒弟</div><div id="jushou">巨獸</div><div id="clear">我來幫你了</div></div><div id="shifu">師傅</div> </body></html>路人丙:還有其他得方式嗎 這種方式
優(yōu)點(diǎn)：通俗易懂，方便
缺點(diǎn)：添加無意義標(biāo)簽，語義化差
路人乙:不是說好一種嗎 實(shí)現(xiàn)就可以了不是嗎
路人丙:最起碼三種以上 不然別想通關(guān)
路人乙:第二種 觸發(fā)BFC規(guī)范
父級(jí)加overflow
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>#container {border: 1px solid red;overflow: hidden;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;} </style><body><div id="container"><div id="tudi">徒弟</div><div id="jushou">巨獸</div></div><div id="shifu">師傅</div> </body></html>路人丙:還有嗎
優(yōu)點(diǎn)：代碼簡潔
缺點(diǎn)：內(nèi)容增多的時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示要溢出的元素
路人乙:第三種
使用偽元素清除浮動(dòng)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>#container {border: 1px solid red;}.clear:after {/*偽元素是行內(nèi)元素 正常瀏覽器清除浮動(dòng)方法*/content: "";display: block;height: 0;clear: both;visibility: hidden;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;} </style><body><div id="container" class="clear"><div id="tudi">徒弟</div><div id="jushou">巨獸</div></div><div id="shifu">師傅</div> </body></html>路人丙:?
優(yōu)點(diǎn)：符合閉合浮動(dòng)思想，結(jié)構(gòu)語義化正確
缺點(diǎn)：ie6-7不支持偽元素：after，使用zoom:1觸發(fā)hasLayout.
看你天資聰穎，我再告知一種，你便可以過去了。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>#container {border: 1px solid red;}.clear:after,.clear:before {content: "";display: table;}.clear:after {clear: both;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;} </style><body><div id="container" class="clear"><div id="tudi">徒弟</div><div id="jushou">巨獸</div></div><div id="shifu">師傅</div> </body></html>結(jié)尾
路人乙聽完，路人乙匆匆離開了
我是歌謠 該問題取自面經(jīng) 歡迎一起討論交流 一個(gè)沉迷于故事得講述者。
?
總結(jié)
以上是生活随笔為你收集整理的为了梦想开始历练之清除浮动篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BAT区块链往事
- 下一篇： 23岁的一无所有，其实是理所应当的