Html Clearfix hack不包含带边框的内部div

我已经尝试使用Clearfix类来启用父div来封装我的所有内部div。我使用Django模板语言中的for循环来呈现带有一些情绪分析信息的个人tweet（使用“details”标记折叠）。我希望父div包含所有这些tweet div，这样页面就不会变得很长和难看。我希望外部div有一个滚动条，这样你就可以很容易地以一种合理的、包含的方式滚动所有tweet。我尝试过使用下面建议的代码，但得到了相同的结果-父div（由黑色边框表示）仅围绕第一个内部tweet div。我还尝试过“overflow:hidden；”对于父div，无效。我将感谢任何帮助或建议..在Chrome上测试它

这是我的clearfix CSS类：

    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both;
        font-size: 0;
        content: " "; 
        visibility: hidden;
        overflow: auto;
    }
    .clearfix {
        display: inline-block; 
        border: black 2px solid;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {
        height: 1%;
    }
    .clearfix {
        display: block;
    }
    /* End hide from IE-mac */

这是使用Django模板语言的my results.html页面的相关部分

<div class="clearfix">

{% for tweet in tweets %}
<summary><h3 style="text-align:left">Tweet #{{ tweet.tweet_no }}</h3>
<div style="background-color: {{ tweet.tweet_color }}; border: #666699 dotted 6px; -moz-  border-radius: 15px; border-radius: 15px; margin: 5px;">
    <p>Tweet: {{ tweet.tweet_text_actual }}</p></summary><details>
    <p>Created at: {{ tweet.created_at }}</p>
    <p>Geo: {{ tweet.tweet_geo }}</p>
    <p>User: {{ tweet.tweeter }}</p>
    <p>Language: {{ tweet.tweet_lang }}</p>
    <p>Place: {{ tweet.tweet_place }}</p>
    <p>Predefined coordinates: {{ tweet.predefined_coors }}</p>
    <p>Sentiment score: <strong>{{ tweet.sentiment_score }}</strong></p>
    <p>Positive score: {{ tweet.pos_score }}</p>
    <p>Negative score: {{ tweet.neg_score }}</p>
    <p>Overall score: {{ tweet.overall_score }}</p>
    <p>Adjusted for exclamation marks? {{ tweet.adjustedExclamation }}</p>
    <p>Moderated by interrogatives present? {{ tweet.adjustedInterrogation }}</p>
    <p>Final processed word list:
    {% for item1, item2 in tweet.zipped_data %}
      ({{ item1 }} = {{ item2 }}),
    {% endfor %}
    </p>
    <p>print color: {{ tweet.tweet_color }}</p>
    <p>Dates: {{ tweet.date_format }}</p>

</details>
</div>
{% endfor %} 

</div>

{tweets%中的tweet为%1}
Tweet{{Tweet.Tweet{u no}
推特：{{Tweet.Tweet_text_actual}

创建时间：{{tweet.Created_at}

地理：{{tweet.tweet_Geo}

用户：{{tweet.tweeter}

语言：{{tweet.tweet_lang}}

地点：{{tweet.tweet_Place}

预定义坐标：{{tweet.Predefined_coors}}

情绪得分：{{tweet.mootional_score}

正分数：{{tweet.pos_score}

负分数：{{tweet.neg_score}

总分：{{tweet.totall_score}

调整为感叹号？{{tweet.adjustedExclamation}

由在场的审问者主持？{{tweet.adjustedInterrogation}

最终处理单词列表：
{tweet.zipped_data%}
（{{item1}}={{item2}），
{%endfor%}

打印颜色：{{tweet.tweet\u color}

日期：{{tweet.date_format}}

{%endfor%}

这里不需要clearfix解决方案。使用标记更正嵌套，渲染问题应消失：

{% for tweet in tweets %}
<div style="background-color: {{ tweet.tweet_color }}; border: #666699 dotted 6px; -moz-  border-radius: 15px; border-radius: 15px; margin: 5px;">
    <summary>
        <h3 style="text-align:left">Tweet #{{ tweet.tweet_no }}</h3>        
        <p>Tweet: {{ tweet.tweet_text_actual }}</p>
    </summary>
    <details>
        <p>Created at: {{ tweet.created_at }}</p>
        <p>Geo: {{ tweet.tweet_geo }}</p>
        <p>User: {{ tweet.tweeter }}</p>
        <p>Language: {{ tweet.tweet_lang }}</p>
        <p>Place: {{ tweet.tweet_place }}</p>
        <p>Predefined coordinates: {{ tweet.predefined_coors }}</p>
        <p>Sentiment score: <strong>{{ tweet.sentiment_score }}</strong></p>
        <p>Positive score: {{ tweet.pos_score }}</p>
        <p>Negative score: {{ tweet.neg_score }}</p>
        <p>Overall score: {{ tweet.overall_score }}</p>
        <p>Adjusted for exclamation marks? {{ tweet.adjustedExclamation }}</p>
        <p>Moderated by interrogatives present? {{ tweet.adjustedInterrogation }}</p>
        <p>Final processed word list:
            {% for item1, item2 in tweet.zipped_data %}
                ({{ item1 }} = {{ item2 }}),
            {% endfor %}
        </p>
        <p>print color: {{ tweet.tweet_color }}</p>
        <p>Dates: {{ tweet.date_format }}</p>
    </details>
</div>
{% endfor %} 

{%用于tweets%中的tweet}
Tweet{{Tweet.Tweet{u no}
推特：{{Tweet.Tweet_text_actual}

创建时间：{{tweet.Created_at}

地理：{{tweet.tweet_Geo}

用户：{{tweet.tweeter}

语言：{{tweet.tweet_lang}}

地点：{{tweet.tweet_Place}

预定义坐标：{{tweet.Predefined_coors}}

情绪得分：{{tweet.mootional_score}

正分数：{{tweet.pos_score}

负分数：{{tweet.neg_score}

总分：{{tweet.totall_score}

调整为感叹号？{{tweet.adjustedExclamation}

由在场的审问者主持？{{tweet.adjustedInterrogation}

最终处理单词列表：
{tweet.zipped_data%}
（{{item1}}={{item2}），
{%endfor%}

打印颜色：{{tweet.tweet\u color}

日期：{{tweet.date_format}}

{%endfor%}

对于

.clearfix

，这看起来不是一个有效的用例（如果您共享了代码，则不会浮动任何内容）。。。你的一些标记也没有正确嵌套。当然，但我在某个地方读到一篇关于它也应用于带边框的内部div的帖子。对于这种情况，是否有扩展div的建议？修复您的标记<代码>在它包含的

（使用内联样式）之前关闭。这很尴尬。万分感谢！