使用padding-bottom和margin-bottom实现两栏等高布局原理

心已赠人 2022-04-13 07:44 178阅读 0赞

声明：以下均为个人见解，若有错误请指出。

效果预览：  
![两栏等高][2018112810264837.png]

<!DOCTYPE html>
    <html>
      <head>
        <title>demo</title>
        <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        body {
        }
        .container {
          width: 400px;
          overflow: hidden;
          background-color: pink;
        }
        .left {
          float: left;
          width: 200px;
          background-color: silver;
          padding-bottom: 100px;
          margin-bottom: -100px;
          text-align: center;
        }
        .right {
          float: left;
          width: 100px;
          background-color: skyblue;
        }
        </style>
      </head>
      <body>
        <div class="container">
            <span class="left">我在左侧</span>
            <span class="right">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</span>
        </div>
      </body>
    </html>

实现机制：

left元素高度根据右侧文字的高度进行自适应。利用padding-bottom正值和margin-bottom负值相互抵消。

当父元素设置overflow: hidden时产生的影响：

（1）触发bfc，使的父元素的高度在计算时包括float元素的高度，子元素left和right的高度中的最大者决定了父元素的高度。此处父元素的高度即为right元素的高度。  
（2）left元素中由于背景色可以作用在padding中，而超出right元素高度部分的padding会被父元素设置的overflow: hidden截断。  
（3）left元素的margin-bottom抵消掉padding-bottom部分，使得父元素在检测高度时发现左侧的高度低于右侧的高度，因此父元素的高度会与right的高度一致。

当修改margin-bottom的值为-40px时产生的效果：  
![两栏等高][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dyZXlCZWFyQ2hhbw_size_16_color_FFFFFF_t_70]  
此时父元素在检测高度时发现左侧高度高于右侧，因此父元素的高度就等于左侧元素的高度。

注意点：事实上第一种情况中left元素的高度(元素框尺寸)等于padding + 文字的高度，其高度要远高于right元素的高度，但是由于父元素中的overflow: hidden，导致对于父元素来说，left元素的高度只有文字的高度，padding部分会被margin抵消掉。也就导致为什么父元素的高度是right元素的高度而不是left元素的高度。

[2018112810264837.png]: /images/20220413/daa1f8bad1ba4aeeaaac713266c0f076.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dyZXlCZWFyQ2hhbw_size_16_color_FFFFFF_t_70]: /images/20220413/9bbbd1ea8b7042efaa2047b109d442aa.png