div没有包装

Question

这是一种更有效的方式......出于某种原因,我觉得这是一种老式的做法.

我在这里 有这个页面(I'm re-creating a lynda.com webpage for a lesson),包装器实际上没有环绕该部分id="trailInfo".

为了做到这一点,我会添加br class="br_clear"/

有没有更正确的方法呢？如果我添加clear=both到该部分是不行的,我必须将其添加到br.谢谢!

Answer 1

使用overflow:hidden父div中的属性更新CSS

#wrapper {
    background-color: #FFFFFF;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 960px;
}

Explanation About Clearing floats

基于浮动的布局的一个常见问题是父div不想伸展以容纳子浮动div.如果你要在父div周围添加一个边框,你必须以某种方式命令浏览器一直拉伸父div.

现在看看你面临的问题:演示

因为你当时没有清除漂浮物.

所以这个问题的旧解决方案是clear:both;

如果你将在子代表浮动元素之后添加额外的div,如下面提到的代码,这将清除浮点数:

<div class="parent">
  <div class="left-child"></div>
  <div class="right-child"></div>
  <div style="clear:both;"></div>
</div>

新的解决方案是,overflow:hidden; 如果你将给overflow:hidden你的parent div这将自动清除父div内的所有子浮动元素.

请参阅新的解决方案演示:tinkerbin.com/WKqFS7Lc