如何正确地将.clearfix：after类应用于HTML？

问题描述

| 我目前正在尝试（但失败）获取.clearfix：在清除堆栈上详细介绍的修复程序之后，这里的所有内容都可以在Chrome和Firefox中使用。 我的理解是，应将.clearfix类添加到包含需要清除的浮点数的元素中。但是，当我尝试该方法时，我无法修复该问题。 有人可以指出我的问题所在以及如何正确应用.clearfix类吗？ 先谢谢您的帮助！ 这是相关的CSS：

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

.details_left{
width:400px;
float:left;
margin-right:35px;
}

.details_right{
width:400px;
float:left;
}

.problem,.faq{
min-height:500px;
background-color:white;
width:870px;
padding:15px 15px 15px 15px;
box-shadow: 0px -1px 3px #888;
-moz-box-shadow: 0px -1px 3px #888;
}

.cluster{
width:410px;
border-bottom: 1px solid #cccccc;
margin: 5px 10px 7px 10px;
}
.title{
color:#0066CC;
font-size:0.95em;
font-weight:bold;
}

.role{
color:#666666;
font-size:0.75em;
margin: 2px 0px 2px 0px;
}

.summary{
color:black;
font-size:0.9em;
font-weight:normal;
margin: 2px 0px 2px 0px;
}

.extras,.add_sub_bucket,.add{
color:#666666;
font-size:0.7em;
margin: 2px 0px 7px 0px;
}

这是HTML：

<div class=\"problem\" class=\"clearfix\">
        <div class=\"details_left\">
            <div class=\"cluster\">
                <a href=\"bMvRdr-mUOU\" id=\"johnk\" class=\"vid_trigger\"><div class=\"title\">The importance of demonstrating intellectual curiosity</div></a>
                <div class=\"role\">Kenton Kivestu: Summer Consultant,BCG San Francisco</div>
                <div class=\"summary\">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class=\"extras\">View Kenton\'s blog posts</div>
            </div>

            <div class=\"cluster\">
                <a href=\"#\" id=\"rob\" class=\"context\" ><div class=\"title\">On the importance of playing to company culture</div></a>
                <div class=\"role\">Rob Reiling: Associate,McKinsey & Co.,Minneapolis</div>
                <div class=\"summary\">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class=\"extras\">View full interview</div>
            </div>

            <div class=\"cluster\">
                <a href=\"#\" id=\"jesse\" class=\"context\" ><div class=\"title\">Remembering to be yourself in interviews</div></a>
                <div class=\"role\">Jesse Lau: Consultant,Parthenon,San Francisco</div>
                <div class=\"summary\">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class=\"extras\">View full interview</div>
            </div>

            <div class=\"cluster\">
                <a href=\"#\" id=\"richard\" class=\"context\" ><div class=\"title\">The required confidence factor</div></a>
                <div class=\"role\">Richard Smith: Consultant,Bain & Co.,Boston</div>
                <div class=\"summary\">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class=\"extras\">View full interview</div>
            </div>

            <div class=\"cluster\">
                <a href=\"#\" id=\"jessi\" class=\"context\" ><div class=\"title\">Jessi talks about X factor</div></a>
                <div class=\"role\">Jessi England: Consultant,San Francisco</div>
                <div class=\"summary\">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class=\"extras\">View full interview</div>
            </div>

            <div class=\"cluster\">
                <a href=\"#\" id=\"jessi\" class=\"context\" ><div class=\"title\">Communicating clearly and cohesively</div></a>
                <div class=\"role\">Amar Shibli: Consultant,New York</div>
                <div class=\"summary\">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class=\"extras\">View full interview</div>
            </div>
        </div>

        <div class=\"details_right\" id=\"video_container\">
            Hey there! Select an interview from the left! test
        </div>
    </div> <!-- closing problem div -->

    

解决方法

        好吧，如果您的工作代码与您的示例完全相似，则您实际上尚未定义

.clearfix

样式规则。那将是您的第一步。另外，详细说明您要完成的任务也将有所帮助。 您是否要正确地使“ 3”元“包含”浮动元素？还是您需要使浮动元素周围的内容正确地排列在“块”中？ 从您的HTML代码段来看，似乎是前者。在这种情况下，只需添加一个

.clearfix {
    overflow: auto;
}

您的样式表应该工作。 但是，无法确切知道您要查找的内容，或者该HTML周围的HTML看起来很难给出明确的答案。