css - 在容器内 float div，文本从容器底部漏出，我希望它在容器内。

Question

我在一个容器中有 2 个 div，每个内部 div 都向左和向右浮动，我想在主要内容 div 中为数据制作 2 列。 目前，文本从内容左侧和内容右侧的底部漏出，即使它们包含在内容中。

Here is a jsfiddle

<div id="content">
    <div id="content-left">I want to put content in here<br/><br/><br/>This is outside? why?    </div>
    <div id="content-right">and more in here</div>
    Maybe other content here, inside the content
</div>

和 CSS

#content-left{
width: 50%;
border: 1px dotted #aaa;
float: left;
}

#content-right{
width: 49%;
float: right;
border: 1px dotted #aaa;
}

#content{
background-color: #eee;
width: 95%; /* Width of Main Content Div, % for Fluid*/
height: auto;
max-width: 1350px; /*Max width, To wide on big monitor*/
margin: 0 auto;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}

此外，关于 float 元素的任何提示都很棒，如果我发现它们有用，可能会赢得代表，我以为我已经掌握了但显然不是! :P

Answer 1

你只需要在最后一个 div 里面添加一个清除 br

 Maybe other content here, but this should be below the 2 above divs in the rendered view.
    <br style="clear:both;" />
</div>

http://jsfiddle.net/jasongennaro/sahbz/9/

发生这种情况是因为 floated 元素被从文档流中取出。