截面元素因溢出而缩小：自动？

Question

我的HTML文档中有2个部分，请参阅 Here ，现在当我将窗口大小减小到大约820px时，2ns部分会缩小，为什么会发生这种情况？

见下面的截图：

现在第二部分有overflow:auto，如果我删除它，一切正常， Link HERE

但究竟是什么导致了这个问题，section元素肯定是一个块元素，那么为什么不采用100％宽度呢？有人可以解释一下吗？

Answer 1

您应该删除section元素的margin-top: -1px;样式或设置.intro-lpoo元素的样式：overflow: auto。我想到的原因是：BFC

Answer 2

顶部的浮动元素会导致问题。如果您使用clearfixes，则不会有任何问题！还可以使用以下属性来响应图像。

img{
 max-width:100%;
 height:auto;
}

Answer 3

好的，让我们考虑一下。 您的intro-lpoo部分包含height: 100%，其中包含float的2个div。其中一个div有height: 0，因为你放置了绝对位置img。 why-coworking从一开始就没有缩小的原因是height: 100% intro-lpoo。但是，当您的浏览器分辨率变小时，height: 100%的{​​{1}}变小，并且因为您的右侧div（包含绝对定位的img）具有intro-lpoo和您的左侧div height: 0 }} intro-wrpr这就是为什么float: left缩小并填充why-coworking旁边的可用空间。

我希望能够解释