清除浮动解决高度坍塌的5种方法 以及兼容IE
清除浮動(dòng)解決高度坍塌的5種方法 以及兼容IE
文章目錄
- 清除浮動(dòng)解決高度坍塌的5種方法 以及兼容IE
- 一、高度坍塌的形成原因以及代碼和效果演示
- 二、解決辦法
- 方法1:定義一個(gè)樣式使用偽類元素選擇器 ::after
- 方法2:給父元素添加 屬性：overflow:hidden
- 方法3:添加空div
- 方法4:父級(jí)隨同子級(jí)一起浮動(dòng)
- 方法5:給父級(jí)設(shè)置固定高度
一、高度坍塌的形成原因以及代碼和效果演示
- 在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。
- 但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。
- 由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁面布局混亂。
形成塌陷的代碼如下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {background: #008c8c;padding: 30px;}.demo {width: 100px;height: 100px;background: lightcoral;margin: 10px;float: left;}</style> </head> <body><div class="box"><div class="demo">1</div><div class="demo">2</div><div class="demo">3</div><div class="demo">4</div><div class="demo">5</div><div class="demo">6</div><div class="demo">7</div><div class="demo">8</div><div class="demo">9</div><div class="demo">10</div></div> </body> </html>二、解決辦法
方法1:定義一個(gè)樣式使用偽類元素選擇器 ::after
簡述: 該樣式在clearfix，即父級(jí)元素的最后，添加了一個(gè)::after偽元素，
通過清除偽元素的浮動(dòng)，達(dá)到撐起父元素高度的目的。
注意到該偽元素的display值為block，即，它是一個(gè)不可見的塊級(jí)元素
弊端:抒寫代碼較多 目前還沒有發(fā)現(xiàn)其他問題 歡迎大佬點(diǎn)評(píng)
方法2:給父元素添加 屬性：overflow:hidden
簡述： 這個(gè)屬性和值是當(dāng)內(nèi)容超過其父元素時(shí)，可以使用該屬性和值將溢出的部分裁剪掉。
當(dāng)子元素浮動(dòng)時(shí)，給父元素添加overflow：hidden，按照它的本身特性，應(yīng)該將子元素超出的部分截掉，但是因?yàn)樽釉赜懈?dòng)，無法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素?fù)碛辛烁叨?#xff0c;而這個(gè)高度是跟隨子元素自適應(yīng)的高度，這樣就把浮動(dòng)的子元素包含在父元素內(nèi)了。
此外屬性overflow的值 除了"visible"之外的任何有效值，它們都能達(dá)到撐起父元素高度，清除浮動(dòng)的目的 例如：auto、scroll、hidden都可以，但同時(shí)也存在一定的弊端.
弊端: scroll值會(huì)導(dǎo)致滾動(dòng)條始終可見，hidden會(huì)使得超出邊框部分不可見等
了解overflow:hidden實(shí)現(xiàn)清除浮動(dòng)的底層原理請(qǐng)移步:BFC塊級(jí)格式化上下文
方法3:添加空div
簡述：在高度坍塌的最后一個(gè)元素后添加一個(gè)空元素(父元素結(jié)束標(biāo)簽之前插入) 并設(shè)置樣式clear:both
弊端：這樣無疑是增加了無意義的標(biāo)簽，一個(gè)大型頁面中，這種標(biāo)簽太多既不利于維護(hù)也不美觀還添加了渲染負(fù)擔(dān) ，因此不建議使用。
.clearfix {clear: both;}方法4:父級(jí)隨同子級(jí)一起浮動(dòng)
簡述：將父級(jí)也浮動(dòng)起來 給父級(jí)設(shè)置浮動(dòng)屬性 clear: both;
弊端：父級(jí)設(shè)置成浮動(dòng)了，那爺爺級(jí)肯定也會(huì)受影響，又得解決爺爺級(jí)的高度坍塌，然后就開始無限套娃吧孩子！！
.box {float: left; // float: right;}方法5:給父級(jí)設(shè)置固定高度
簡述：給父級(jí)設(shè)置固定高度 前提條件已知子元素高度 不建議使用
弊端：固定死高度 不夠靈活
.box {height: 500px;}每個(gè)方法底層原理大多相似 所以需要記住的是原理而不是實(shí)現(xiàn)的代碼.
總結(jié)
以上是生活随笔為你收集整理的清除浮动解决高度坍塌的5种方法 以及兼容IE的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中国医科大学2021年9月《临床营养学》
- 下一篇： 基于PLSQL的数据库备份方法