為什么設置 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;
????????????/*?向上移動?*/
????????????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加長所有列，再使用"overflow:?hidden"將它們一刀切成高度相同的列（超過父容器邊框都被隱藏掉）。
但是你會發現父容器沒有顯式設置高度（依賴子元素），父容器一直包裹著子元素，這樣會導致"overflow:?hidden"不生效。那么這個場景下就得考慮讓父容器邊框范圍收縮（讓子元素邊框超過父容器邊框）。
margin-bottom取負值就可以讓子元素盒子實際占用尺寸減少（content+padding+border+margin），但又不會影響到子元素邊框（content+padding+border）。對應父容器內部被占用的空間減少，父容器邊框范圍收縮，"overflow:?hidden"就可以生效了。（margin不會影響子元素邊框，通過影響子元素實際占用尺寸來影響父容器邊框）
這個等高布局涉及的知識點還是挺多的，比如"overflow:?hidden"何時觸發、內外邊距對盒子的影響、盒子未顯式設置高度時的處理。
2020-09-12
overflow的hidden會把超出的值隱藏，padding-bottom把內部間距撐開，當元素的內容填入時，兩列就會被撐開，所以在視覺上看到的，是等高的，高度是以內容多的那列為準，但是查看dom元素的時候，兩列的內容區域是不一樣的