HTML5-节不会自动将其高度设置为内部组件，而是将其高度设置为跨度高度

Question

我的HTML项目中的

部分包含 h2 ， span 和图，其中带有img。 h2是section的标题，并且图形和跨度是浮动的（例如，图形在左侧，跨度在右侧）。

布局在视觉上是可以的，但是当我在浏览器中检查元素时，该部分将其高度设置为跨度的高度，并且图形在该部分之外溢出（如我所说-视觉上元素没有重叠，但实际部分的高度是错误的）。

这给我带来了问题，因为我的页面上有几个部分接一个部分，并且我需要通过导航链接引用特定的部分，这会导致我在页面中的位置不正确。

为什么部分未自动将其实际高度设置为内部所有元素的高度？ 在他的情况下，如何强制截面具有所有包含元素的高度，而不是具有span的高度？

                <section class="sec1">
                <h2>Header</h2>
                <figure class="figureLeft">
                    <img src="picture.jpg" width="250" height="300" />
                    <figcaption><i>Picture</i></figcaption>
                </figure>
                <span>A few lines of text inside the span....
                </span>
               </section>

Answer 1

您需要为要解决的问题设置要素。

您可以从以下位置升级：

display:inline-block;
height: auto;