Question

这是我的html代码，其中“box”为主div，然后是其中的三个div 它们分别位于左，中，右两侧。

copyToChannel

这是我的css代码

<div id="box">
 <div class="left">Left</div>     
 <div class="middle">Middle</div>
 <div class="right">Right</div>
</div>

这是jsfiddle链接：http://jsfiddle.net/hep9oLzn/ 边框没有包装内容。

Answer 1

这是因为浮动的子元素。

All about floats - CSS-Tricks

您需要clearfix。

What is clearfix?

这里的例子是微clearfix。 Micro Clearfix Hack

＆＃13;

#box {
    width:90%;
    height:auto;
    border:5px solid green;
    box-sizing: border-box;
}
.left {
    float:left;
    width:30%;
}
.right {
    float:right;
    width:30%;
}
.middle {
    float:left;
    width:30%;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

＆＃13;

<div id="box" class="cf">
    <div class="left">Left</div>     
    <div class="middle">Middle</div>
    <div class="right">Right</div>
</div>

＆＃13;

Answer 2

只需将float：left添加到#box，

＆＃13;

#box {
    width:90%;
    height:auto;
    border:5px solid green;
    float:left;
}

＆＃13;

Answer 3

你可以添加位置：绝对;到#box。

Fiddle

 #box {
    width:90%;
    height:auto;
    position:absolute;
    border:5px solid green;
}

Answer 4

你可以添加display：table;到#box

#box {
    width:90%;
    height:auto;
    border:5px solid green;
    display: table;
}

http://jsfiddle.net/bw0vhske/1/

有关显示表的一些信息： http://colintoh.com/blog/display-table-anti-hero

Answer 5

Demo

HTML代码

<div id="box">
    <div class="left">Left</div>     
    <div class="middle">Middle</div>
    <div class="right">Right</div>
    <div class="clear"></div> 
</div>

CSS代码

#box {
    width:90%;
    height:auto;
    border:5px solid green;
}
.left {
    float:left;
    width:30%;
}
.right {
    float:right;
    width:30%;
}
.middle {
    float:left;
    width:30%;
}
.clear{
    clear:both;
}
}

Answer 6

您的div＃框仅包含浮动元素，这些元素将从普通浮点数中删除。结果，您的div＃框没有高度。您可以通过多种方式解决问题。

一个是为你的div设置一个明确的高度。例如：

#box {
    width:90%;
    height:600px;
    border:5px solid green;
    box-sizing: border-box;
}

您可以使用＆＃34; clearfix＆＃34;引导其他ui框架使用的解决方案。例如，添加此项以使用css：

#box::after {
  display: table;
  clear: both;
}

您可以从内部div中删除float属性并使其成为内联块。例如：

#box > div {
  display: inline-block;
  width: 30%;
}

你可以在浮动元素之后放置一个隐藏的对象并使用clear：两者都可以，例如：

<div id="box" class="cf">
    <div class="left">Left</div>     
    <div class="middle">Middle</div>
    <div class="right">Right</div>
    <div class="fix"></div>
</div>

.fix {
      clear: both;
      visibility: hidden;
   }

Answer 7

仅供参考：clearfix解决方案还可以与outline CSS属性一起使用（类似于边框，它们围绕div /元素）

.clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both; }

CSS边框不包含整个div内容

7 个答案: