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

Question

我目前正在尝试（但失败）获得 .clearfix:after clearing 详细说明 on stack here 的修复程序，并在 position is everything here 上在 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, Bain & Co., 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, McKinsey & Co., 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 -->

Answer 1

好吧，如果您的工作代码与您的示例完全相似，那么您实际上还没有定义.clearfix 样式规则。那将是你的第一步。此外，详细说明您要完成的工作也会有所帮助。

您是否想让您的div 正确“包含”浮动元素？或者你是否需要让你的浮动元素周围的东西正确地排列成“块”？

从您的 HTML sn-p 看来，它似乎是前者。在这种情况下，只需添加一个

.clearfix {
    overflow: auto;
}

到您的样式表应该可以工作。

但是，不知道你在寻找什么，或者这个 HTML 周围的 HTML 看起来像什么，很难给出明确的答案。