为什么浮动div与下一个元素重叠？

Question

HTML：

<div  id="tabs">
      ertgertget
    </div>

    <div id="design">
       EHELLOW RODL
    </div>

CSS：

#design{
    border: solid 10px black;
}

#tabs {
    border: 1px solid red;
    float: left;
}

http://jsfiddle.net/2NLK8/

为什么第二个div不完全出现在浮动div的右边？

Answer 1

#design{
   border: solid 10px black;
   overflow:auto;
 }

#tabs {
   border: 1px solid red;
   float: left;
}

Example

Answer 2

尝试：

#design {
    border: solid 10px black;
    display:inline;
}

#tabs {
    border: 1px solid red;
    display:inline;
}

DEMO

Answer 3

因为浮动元素占用的内容与内容一样多，而默认的块元素占用整行。如果您希望第二个div与右侧对齐，请将其向右浮动

Answer 4

我会熟悉“clearfix”。

请在此处查看：Force Element To Self-Clear its Children

在这些类型的案件中，它将“清除”浮动。这是业内非常常用的方法。