解决高度坍塌方法
清除浮動(dòng)
-
根源：
常規(guī)流盒子的自動(dòng)高度在計(jì)算時(shí)不會(huì)考慮浮動(dòng)盒子，父元素未定高度，內(nèi)部元素浮動(dòng)或定位（除相對(duì)定位），導(dǎo)致其脫離文檔流，使父元素?zé)o法適應(yīng)其高度，從而造成高度坍塌。
-
解決方式：
方法一
給父元素添加高度，并確保子元素高度和小于它。
<!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>方法二
在盒子結(jié)尾加上clear屬性，清除浮動(dòng)。
引入——css屬性：clear
- 默認(rèn)值：none
- left：清除左浮動(dòng)，該元素必須出現(xiàn)在前面所有左浮動(dòng)盒子的下方
- right：清除右浮動(dòng)，該元素必須出現(xiàn)在前面所有右浮動(dòng)盒子的下方
- both：清除左右浮動(dòng)，該元素必須出現(xiàn)在前面所有浮動(dòng)盒子的下方
<!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樣式來(lái)觸發(fā)BFC，從而解決高度坍塌。
引入——BFC-塊級(jí)格式化上下文：決定了元素如何對(duì)其上下文內(nèi)容進(jìn)行定位。
觸發(fā)BFC后元素特征：
1.父元素的外邊距不會(huì)和子元素重疊；
2.開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋；
3.子元素垂直方向不會(huì)再margin重疊。
理解：這里只是利用該屬性撐起父元素的高度，并沒將元素清除，當(dāng)overflow值不為visible時(shí)，從而觸發(fā)BFC，清除浮動(dòng)。
<!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>歡迎補(bǔ)充！
總結(jié)
- 上一篇： 【数据科学赛】大规模细粒度建筑分类 #图
- 下一篇： 学讲普通话水平测试软件,普通话智能学习软