為什么設(shè)置 padding-bottom, margin-bottom 的極大值再加上 overflow:hidden 就可以等高呢
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>等高布局-02</title>
????<style>
????????.parent{
????????????overflow:?hidden;
????????}
????????.left,?.right{
????????????width:?300px;
????????????float:?left;
????????????padding-bottom:?9999px;
????????????/*?向上移動(dòng)?*/
????????????margin-bottom:?-9999px;
????????}
????????.left{
????????????background-color:?tomato;
????????}
????????.right{
????????????background-color:?teal;
????????}
????</style>
</head>
<body>
????<div?class="parent">
????????<div?class="left">
????????????left?is?left
????????</div>
????????<div?class="right">
????????????Lorem?ipsum?dolor?sit,?amet?consectetur?adipisicing?elit.?Iusto,?rerum.?Commodi?in?aspernatur?asperiores?reiciendis?ipsum?ex?voluptas?amet?sequi.?Voluptate?nulla?laborum?molestias?placeat?natus?officiis?animi?officia?quas.
????????</div>
????</div>
</body>
</html>
2020-11-24
最初是想讓padding-bottom加長(zhǎng)所有列，再使用"overflow:?hidden"將它們一刀切成高度相同的列（超過(guò)父容器邊框都被隱藏掉）。
但是你會(huì)發(fā)現(xiàn)父容器沒(méi)有顯式設(shè)置高度（依賴子元素），父容器一直包裹著子元素，這樣會(huì)導(dǎo)致"overflow:?hidden"不生效。那么這個(gè)場(chǎng)景下就得考慮讓父容器邊框范圍收縮（讓子元素邊框超過(guò)父容器邊框）。
margin-bottom取負(fù)值就可以讓子元素盒子實(shí)際占用尺寸減少（content+padding+border+margin），但又不會(huì)影響到子元素邊框（content+padding+border）。對(duì)應(yīng)父容器內(nèi)部被占用的空間減少，父容器邊框范圍收縮，"overflow:?hidden"就可以生效了。（margin不會(huì)影響子元素邊框，通過(guò)影響子元素實(shí)際占用尺寸來(lái)影響父容器邊框）
這個(gè)等高布局涉及的知識(shí)點(diǎn)還是挺多的，比如"overflow:?hidden"何時(shí)觸發(fā)、內(nèi)外邊距對(duì)盒子的影響、盒子未顯式設(shè)置高度時(shí)的處理。
2020-09-12
overflow的hidden會(huì)把超出的值隱藏，padding-bottom把內(nèi)部間距撐開，當(dāng)元素的內(nèi)容填入時(shí)，兩列就會(huì)被撐開，所以在視覺(jué)上看到的，是等高的，高度是以內(nèi)容多的那列為準(zhǔn)，但是查看dom元素的時(shí)候，兩列的內(nèi)容區(qū)域是不一樣的