解决高度坍塌方法
清除浮動
-
根源：
常規流盒子的自動高度在計算時不會考慮浮動盒子，父元素未定高度，內部元素浮動或定位（除相對定位），導致其脫離文檔流，使父元素無法適應其高度，從而造成高度坍塌。
-
解決方式：
方法一
給父元素添加高度，并確保子元素高度和小于它。
<!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> </head> <style>.parent{height: 300px;background-color: blueviolet;}.kid{height: 300px;float: left;width: 300px;background-color: cadetblue;border: 1px solid black;box-sizing: border-box;}</style> <body><div class="parent"><div class="kid"></div><div class="kid"></div></div> </body> </html>方法二
在盒子結尾加上clear屬性，清除浮動。
引入——css屬性：clear
- 默認值：none
- left：清除左浮動，該元素必須出現在前面所有左浮動盒子的下方
- right：清除右浮動，該元素必須出現在前面所有右浮動盒子的下方
- both：清除左右浮動，該元素必須出現在前面所有浮動盒子的下方
<!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> </head> <style>.parent{background-color: blueviolet;}.kid{height: 300px;float: left;width: 300px;background-color: cadetblue;border: 1px solid black;box-sizing: border-box;}.clear{clear: both;}</style> <body><div class="parent"><div class="kid"></div><div class="kid"></div><div class="clear"></div></div> </body> </html>方法三
使用after偽元素選擇器，并給父元素加上clearfix的類名。
CSS樣式：.clearfix::after{
? ? ? ? ? ? ? ? ? ? ? content:""
? ? ? ? ? ? ? ? ? ? ? display:block;
? ? ? ? ? ? ? ? ? ? ? ?clear:both;
? ? ? ? ? ? ? ? ? ?}
?父元素引用：class="clearfix"?
<!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> </head> <style> .clearfix::after{content:"";display:block;clear:both;}.parent{background-color: blueviolet;}.kid{height: 300px;float: left;width: 300px;background-color: cadetblue;border: 1px solid black;box-sizing: border-box;} </style> <body><div class="parent clearfix"><div class="kid"></div><div class="kid"></div></div> </body> </html>方法四
給父元素添加overflow樣式來觸發BFC，從而解決高度坍塌。
引入——BFC-塊級格式化上下文：決定了元素如何對其上下文內容進行定位。
觸發BFC后元素特征：
1.父元素的外邊距不會和子元素重疊；
2.開啟BFC的元素不會被浮動元素所覆蓋；
3.子元素垂直方向不會再margin重疊。
理解：這里只是利用該屬性撐起父元素的高度，并沒將元素清除，當overflow值不為visible時，從而觸發BFC，清除浮動。
<!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> </head> <style> .parent{background-color: blueviolet;overflow: hidden;}.kid{height: 300px;float: left;width: 300px;background-color: cadetblue;border: 1px solid black;box-sizing: border-box;} </style> <body><div class="parent"><div class="kid"></div><div class="kid"></div></div> </body> </html>歡迎補充！
總結
- 上一篇： 【数据科学赛】大规模细粒度建筑分类 #图
- 下一篇： 学讲普通话水平测试软件,普通话智能学习软