Question

我有两个问题：

为什么元素#post不足以覆盖图像？虽然我设置了height:auto。
为什么overflow:hidden会解决此问题？据我所知，当一个元素从它的父元素中出来并且它隐藏了一部分时，就会使用overflow:hidden。在我的例子中，它并没有隐藏它。它延伸父元素以覆盖图像。为什么呢？

请原谅我糟糕的英语。如果可以用简单的英语单词解释。非常感谢。

HTML：

<div id="posts">
<div id="new-posts">
    <img src="https://weneedfun.com/wp-content/uploads/2016/01/Daisy-Flower-
3.jpg">
    <p>here is ccontent of post . here is ccontent of post .
        here is ccontent of post . here is ccontent of post .
        here is ccontent of post . here is ccontent of post . </p>
</div>

css：

#posts {
border: 1px solid;
/* overflow: hidden; */
height: auto;
}

#new-posts img{
float: left;
margin: 10px;
height:100px;
width:100px;
}

的jsfiddle：

溢出：https://jsfiddle.net/hamed98/ez66sgwt/

没有溢出：https://jsfiddle.net/hamed98/sL25m9mx/

Answer 1

这是因为图片具有float属性。按设计浮动元素可能会跨越块元素的边界，包括它们的父块（为什么它们以这种方式设计，很好地解释in this article）。这就是容器的自动高度仅由其非浮动内容（文本段落）确定的原因。
通过设置overflow以外的容器visible，可以使容器成为新的block formatting context（作为此属性的副作用）。与通常的块不同，具有新块格式化上下文的块不允许浮点数跨越它们的边界，因此它们总是包含它们的嵌套浮点数。

Answer 2

使用绝对位置

 #posts {
border: 1px solid;
overflow: hidden;
height: auto;
position:absolute;}

为什么身高：自动无法正常工作？

2 个答案: