Question

我有一个CSS

.nav {
    width: 200px;
    line-height: 50px;
    float: left;
}
.content {
    margin: 0px 0px 0px 230px;
}
.container {
    border: 1px solid red;
}

这是HTML

<body>
<div class="container">
    <div class="nav">Some text
        <br>more text
        <br>even more text
    </div>
    <div class="content">
        <h1>Home</h1>
        <p>Text paragraph</p>
    </div>
</div>
</body>

这给我左边的菜单和右边的内容。右边的内容周围有一个红色框，但只有左边的半菜单。

但我想在整个nav-div周围都有红色框也可以帮助吗？

由于玩具

Answer 1

将overflow:auto添加到容器div的CSS：

.container {
    border: 1px solid red;
    overflow:auto;
}

<强> jsFiddle example

浮动子div将其从文档流中移除，容器基本上会折叠，就好像它不存在一样。添加溢出会恢复您所追求的行为。

Answer 2

我认为这是一个快速修复，如果你漂浮你的容器它应该解决你的问题。见http://jsfiddle.net/1540sscj/

.container {
    border: 1px solid red;
    float:left;
    width:100%;
}

Answer 3

最好的方式imho就是添加一个div：

<div style="clear:both;"></div>

在您的浮动元素下： FIDDLE

这样，一旦您的项目中有更多内容，就不需要在容器上使用oveflow:hidden，这可能会给您带来问题。

此外，由于前一个元素已经向左浮动，因此您不应该为内容使用左边距。如果您想在导航和内容之间添加一些余量，最佳做法是让您的内容也向左浮动，然后使用与导航相关的边距（您想要的确切尺寸）而不是窗口左侧。

最后，如果你不想将clear:both div添加到html中，你可以添加一些像

.content:after {
    content:'';
    display:block;
    clear: both;
}

它的浏览器（旧的）兼容性较低但更干净

Answer 4

您必须在{css

中将overflow:auto添加到.container

检查我的js fiddle

也是修改过的css。

.container {
    border: 1px solid red;
    overflow:auto;
}

来自MDN的属性overflow的描述

overflow属性指定是否剪辑内容，渲染滚动条或仅在溢出其块级别时显示内容容器

Answer 5

浮动元素会将其从正常的页面流中移除，但副作用是其父级的尺寸不会扩展以适应它。

所以，你需要做的是clear浮动项目。执行此操作的最佳方法是，不使用其他标记或使用overflow属性，这可能会导致其他问题，具体取决于您的布局，是在父元素上使用:after伪类，如此：

＆＃13;

.nav{
    width:200px;
    line-height:50px;
    float:left;
}
.content{
    margin:0px 0px 0px 230px;
}
.container{
    border:1px solid red;
}
.container::after{
    clear:both;
    content:"";
    display:block;
    height:0;
    width:0;
}

＆＃13;

<body>
<div class="container">
 <div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
 <div class="content">
  <h1>Home</h1>
  <p>Bla bla.</p>
 </div>
</div>
</body>

＆＃13;

DIV作为另一个DIV中的填充块

5 个答案: