容器DIV高度不适应内容

Question

你知道为什么我的.block-left DIV中的文字超出容器.block的范围吗？我希望.block（没有固定的高度）根据.block-left和.block-right中的内容调整其高度。 http://jsfiddle.net/9dUC9/谢谢

.block {
    padding: 20px;
    text-align: justify;
    background-clip: border-box;
    box-sizing: border-box;
    border: 1px solid #000;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.block-left {
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    width: 50%;
}
.block-right {
    float: right;
    overflow: hidden;
    box-sizing: border-box;
    width: 50%;
}
<div class="block">
    <div class="block-left">CENTRE DE kkjljljlj
        <p>3, rue der</p>
        <p>51 lmlm (klklkl)</p>
        <ul id="contact">
            <li>+3 691 123.456</li>
            <li><a href="javascript:sendAnnotatedMailTo('contact','lmlml','lu','Contact via mlmlm.lu','')">contact@blolklkl.la>

            </li>
            <li><a href="http://goo.gl/maps/Ew2" target="_blank"> Plan d'accès</a>

            </li>
        </ul>
    </div>
    <!-- End DIV block-left -->
    <div class="block-right">hgh</div>
    <!-- End DIV block-right -->
</div>

Answer 1

尝试将overflow: auto;添加到.block。 FIDDLE

.block {
    padding: 20px;
    text-align: justify;
    background-clip: border-box;
    box-sizing: border-box;
    border: 1px solid #000;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow: auto; /* here */
}

Answer 2

使用clearfix 这是你想要的吗

http://jsfiddle.net/cancerian73/9dUC9/1/

.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
 }

或者，如果您不需要IE＆lt; 8支持，以下情况也可以：

.clearfix:after {
content: "";
display: table;
clear: both;}