Clearfix不会使div的高度扩展到适合内容

Question

我有一个包含2个子元素的div。第一个div通过jQuery在用户交互上动态添加内容。第二个是一个文本区域，它的父div中没有​​包含问题。

在用户选择一些选项并单击按钮后，通过jQuery添加

<div class="organizer_email_address">something@gmail.com</div>。

我尝试了clearfix方法，但它不会导致父div完全包含第二个子节点。请看一下，看看出了什么问题，谢谢！

HTML

<div id="organizer_email_container">
    <div id="organizer_email_addresses_container">
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
    </div>
    <textarea id="organizer_email_template" class="clearfix">Some text </textarea>
</div>

CSS

#organizer_email_container {
    width: 800px;
    min-height: 130px;
    height: auto;
    margin: 25px auto;
    padding: 25px;
    background: #FAFAFA;    
    display: none;
}

#organizer_email_template {
    width: 500px;
    height: 120px;
    background: #F6F6F6;
    color: #666;
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid #B9B9B9;
    border-top-color: #A4A4A4;
    -moz-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
    -ms-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
    -webkit-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
    box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    float: left;
    clear: both;
}

.organizer_email_address {
    background-color: #F3F7FD;
    border: solid 1px #BBD8FB;
    vertical-align: middle;
    font-size: 12px;
    color: #2A2A2A;
    padding: 2px 5px 2px 7px;
    margin: 1px;
    float: left;
}

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Answer 1

为什么#organizer_email_container上有display：none？

对我来说很好：http://cl.ly/1c361c0G3r0G1U0p3J0P

-

您应该将class="clearfix"放在父容器中，而不是作为文本区域的类。