为了梦想开始历练之清除浮动篇
生活随笔
收集整理的這篇文章主要介紹了
为了梦想开始历练之清除浮动篇
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
前言
開篇
中篇
原因
解決方式
1額外標簽得方法
2觸發BFC overflow
3偽元素
4雙偽元素
結尾
前言
師傅（路人甲）+小徒弟（路人乙）,自從路人乙昨晚沒有被叫去擺地攤之后。早上一起床
路人甲:徒兒，昨晚休息得如何
路人乙:師傅，休息得不錯。
路人甲:你去后山得秘境修煉一番，會遇到一些困難挫折
路人乙:好的師傅
開篇
說著就屁顛屁顛得來到了后山，守門得是一致巨獸(路人丙）
路人丙:你個小娃娃，要想從我這里過，需要回答一個問題
路人乙:你說，我保證能答得上
路人丙:清除浮動得常見方法有哪些，有什么優缺點
路人乙:這種問題有什么意義呢
路人丙:
清除浮動得原因
清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題
那么如何解決這個問題呢
<!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>中篇
路人乙:第一種方式
額外加標簽
<!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>路人丙:還有其他得方式嗎 這種方式
優點：通俗易懂，方便
缺點：添加無意義標簽，語義化差
路人乙:不是說好一種嗎 實現就可以了不是嗎
路人丙:最起碼三種以上 不然別想通關
路人乙:第二種 觸發BFC規范
父級加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>路人丙:還有嗎
優點：代碼簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素
路人乙:第三種
使用偽元素清除浮動
<!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 {/*偽元素是行內元素 正常瀏覽器清除浮動方法*/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>路人丙:?
優點：符合閉合浮動思想，結構語義化正確
缺點：ie6-7不支持偽元素：after，使用zoom:1觸發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>結尾
路人乙聽完，路人乙匆匆離開了
我是歌謠 該問題取自面經 歡迎一起討論交流 一個沉迷于故事得講述者。
?
總結
以上是生活随笔為你收集整理的为了梦想开始历练之清除浮动篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BAT区块链往事
- 下一篇： 23岁的一无所有，其实是理所应当的