清除浮动解决高度坍塌的5种方法 以及兼容IE
清除浮動解決高度坍塌的5種方法 以及兼容IE
文章目錄
- 清除浮動解決高度坍塌的5種方法 以及兼容IE
- 一、高度坍塌的形成原因以及代碼和效果演示
- 二、解決辦法
- 方法1:定義一個樣式使用偽類元素選擇器 ::after
- 方法2:給父元素添加 屬性：overflow:hidden
- 方法3:添加空div
- 方法4:父級隨同子級一起浮動
- 方法5:給父級設置固定高度
一、高度坍塌的形成原因以及代碼和效果演示
- 在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。
- 但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。
- 由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面布局混亂。
形成塌陷的代碼如下
<!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:定義一個樣式使用偽類元素選擇器 ::after
簡述: 該樣式在clearfix，即父級元素的最后，添加了一個::after偽元素，
通過清除偽元素的浮動，達到撐起父元素高度的目的。
注意到該偽元素的display值為block，即，它是一個不可見的塊級元素
弊端:抒寫代碼較多 目前還沒有發現其他問題 歡迎大佬點評
方法2:給父元素添加 屬性：overflow:hidden
簡述： 這個屬性和值是當內容超過其父元素時，可以使用該屬性和值將溢出的部分裁剪掉。
當子元素浮動時，給父元素添加overflow：hidden，按照它的本身特性，應該將子元素超出的部分截掉，但是因為子元素有浮動，無法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素擁有了高度，而這個高度是跟隨子元素自適應的高度，這樣就把浮動的子元素包含在父元素內了。
此外屬性overflow的值 除了"visible"之外的任何有效值，它們都能達到撐起父元素高度，清除浮動的目的 例如：auto、scroll、hidden都可以，但同時也存在一定的弊端.
弊端: scroll值會導致滾動條始終可見，hidden會使得超出邊框部分不可見等
了解overflow:hidden實現清除浮動的底層原理請移步:BFC塊級格式化上下文
方法3:添加空div
簡述：在高度坍塌的最后一個元素后添加一個空元素(父元素結束標簽之前插入) 并設置樣式clear:both
弊端：這樣無疑是增加了無意義的標簽，一個大型頁面中，這種標簽太多既不利于維護也不美觀還添加了渲染負擔 ，因此不建議使用。
.clearfix {clear: both;}方法4:父級隨同子級一起浮動
簡述：將父級也浮動起來 給父級設置浮動屬性 clear: both;
弊端：父級設置成浮動了，那爺爺級肯定也會受影響，又得解決爺爺級的高度坍塌，然后就開始無限套娃吧孩子！！
.box {float: left; // float: right;}方法5:給父級設置固定高度
簡述：給父級設置固定高度 前提條件已知子元素高度 不建議使用
弊端：固定死高度 不夠靈活
.box {height: 500px;}每個方法底層原理大多相似 所以需要記住的是原理而不是實現的代碼.
總結
以上是生活随笔為你收集整理的清除浮动解决高度坍塌的5种方法 以及兼容IE的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中国医科大学2021年9月《临床营养学》
- 下一篇： 基于PLSQL的数据库备份方法