CSS 利用margin-bottom和padding-bottom实现等高的原理是什么

Question

        .Article {
            overflow: hidden;
        }

        .Article>li {
            float: left;
            margin-bottom:-200px;
            padding-bottom: 200px;
            background: #4577dc;
            width: 200px;
            color: #fff;
        }

overflow: hidden;
float: left;
margin-bottom:-2000px;
padding-bottom: 2000px;

这几句代码是怎样相互作用的呢

Answer 1

Answer 2

你说的等高指的是 li 元素吧 ...
其实只和一句话有关：float: left;

另外，现在的 float 已经不推荐使用了，
建议看一下 flex 的盒模型，
很简单，并且元素的排布更符合预期 ..
float 的浮动很多时候会导致一些预期之外的情况！
需要清理浮动什么的