Html 自动调整<；部门>；里面有两个元素

这可能很容易被那些懂得正确编码的人回答。到目前为止，我几乎是自学成才，只有3-4小时的HTML和CSS编码时间

我做了一个容器，又放了两个容器。一个基本的h2+p部分作为介绍部分，另一个h2+ul+p部分作为关于我的部分

我希望这两个容器在另一个容器中，因为我希望父容器有一个背景图像，延伸到其他两个容器后面

但是，当我这样做时，第二个子容器正在父容器的边界之外拉伸。第一个（最左侧）子对象和父对象在高度上对齐。但我很难理解为什么父母不调整身高，这样就可以容纳第二个孩子的整个身高

我在每一个周围都添加了一个边框，这样您可以更容易地看到它。您可以看到两个子对象之间父对象的边界

介绍
----剪掉--

关于我

姓名：罗杰
尼克：红狐四号和格洛兹纳克
发件人：挪威

----剪掉--

/*CSS样式*/
#中间部分{/*这是父分区*/
边框：实心1px；
高度：0自动；
清楚:对,；
}
#introPara{/*左侧intro div*/
边框：实心1px；
填充：0px 10px 0px 10px；
宽度：60%；
身高：100%；
显示：内联块；
}
#bioInfo{/*右侧关于div*/
填充：0px 10px 0px 10px；
边框：实心1px；
宽度：300px；
显示：内联块；
位置：相对位置；
浮动：对；
清除：左；
}

使用清除，它将解决问题

检查

。清除{
明确：两者皆有；
}

编辑

将固定宽度更改为%

---

每当您浮动容器时，它的父级不考虑它的高度。您已经在第二个容器上给出了<代码>浮点：右< /代码>，这就是为什么父方不考虑它的高度并且只到第一个子容器高度的原因。p> #原始问题修复-在第二个子容器后添加一个容器，以清除浮动，使父容器达到全高

  <div style="clear:both;">

Js小提琴演示：

#我能看到的第二个问题-即使在这之后，当窗口宽度减小时，您的布局也会中断，因为您将第二个容器的宽度硬编码为400px

当你把窗口的尺寸调整到较小的尺寸时，第二个容器将包裹在第一个容器下面，我猜你不想这样

我建议您将第二个容器的宽度也以百分比表示为宽度：40%，并添加样式

'box-sizing:border-box；'以使边框和填充成为宽度的一部分

JS Fiddle Demo：（此布局在任何窗口大小下都不会中断）
此外，我建议您以百分比形式给出第二个容器的宽度，如宽度：40%，并添加样式“框大小：边框框；”在两个容器上，使边框和填充成为宽度的一部分。JS小提琴演示：谢谢。这正是我想要的：）@Roger：即使在这个修复之后，由于第二个容器具有硬编码的宽度，重新调整窗口大小时布局也会中断。要解决此问题，请参阅下面的解决方案
.clear{
    clear:both;
}

<div class="clear"></div>

  <div style="clear:both;">