部分元素因溢出而缩小：自动？答案

【问题标题】：Section element shrinking due to overflow:auto?部分元素因溢出而缩小：自动？
【发布时间】：2017-02-03 18:04:24
【问题描述】：

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

请看下面的截图：

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

但是真正导致问题的原因是，section 元素肯定是块元素，那么为什么它不占用 100% 的宽度呢？谁能解释一下？

【问题讨论】：

您从未指定width: 100% 部分，如果您这样做，它将起作用。
@NenadVracar，我想知道为什么会这样！ WHY 对我来说真的很重要。
它与您的顶部部分有关。如果您删除顶部部分，它将获得 width: 100%
@NenadVracar 是的，我注意到了！ :0
左边部分的宽度

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

顶部的浮动元素会导致问题。如果你使用 clearfixes ，你不会有任何问题！对于响应式图像也可以使用以下属性。

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

【讨论】：

@NascoChachev，我想知道为什么会出现问题。
@AlexanderSolonik ，您已将 max-width:66% 设置为容器。这是第一个问题。您说您想要 100% 的宽度，但同时，您将 max-width 属性设置为 66%...，您还使用了浮动元素。您可以使用 clearfixes ，而不是设置 overflow:auto ，效果会更好。有时，当您浮动某些东西时，它会完全破坏页面上的所有内容，就像现在一样。
@nNasco，不。 66% 的宽度应用于 sectio 的子项，而不是该部分本身。
@AlexanderSolonik 天哪，这是因为顶部的浮动元素兄弟..浮动属性会毁了你的东西...只需使用 clearfix...将 clear:both 添加到第二部分男人！！！！！ ....
我用过 clerfixes ！ :)

【解决方案3】：

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

希望能解释一下

【讨论】：

你为什么认为我使用了 clearfix ？该错误与overflow:auto 的行为有关。
您的 clearfix 不起作用。因为您的右侧 div 中没有任何内容（绝对定位的 img 不在页面中，请考虑一下）。您可以验证这一点，只需从 lpoo-info-graphic 中删除 float: left 并对其进行测试。感谢您的反对）
看这里i.imgur.com/FWzwSDv.jpg，我已经删除了图像的绝对位置g，这意味着高度lpoo-info-graphic不再为零，也尝试了绝对定位图像，两种方式都不行有区别。图像也证明，第 1 部分的宽度是 100%！