div没有包装

Question

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

我有这个页面HERE (I'm re-creating a lynda.com webpage for a lesson)，包装器实际上并没有包围id="trailInfo"部分。

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

有更正确的方法吗？如果我将clear=both添加到该部分不起作用，我必须将其添加到br。 谢谢！

Answer 1

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

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

<强> Explanation About Clearing floats

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

现在看到您遇到的问题：demo

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

此问题的旧解决方案为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

Answer 2

您好现在给#wrapper overflow:hidden;

就像这样

#wrapper{
overflow:hidden;
}

的 Demo 的

Answer 3

将height: auto;添加到包装类。它的工作原理

Answer 4

你应该使用overflow：hidden;你的包装上的财产。

#wrapper{
overflow:hidden;
height:auto;
}