CSS clearfix 似乎不起作用

Question

我正在尝试使用 clearfix 而不是清除两者，但由于某种原因它不起作用。我按照教程做了所有的事情。

我应该怎么做才能让它发挥作用？

    * {
        margin: 0;
        padding: 0;
    }
    
  /* .first_div {
       width:50%; 
       height:50%; 
       background-color:red;
       margin: 50px auto;  
       overflow: auto;
     
    }*/
    
    .second_div {
        width:50px; 
        height:50px; 
        background-color:green;
        float: left;
     
     } 
    
    .third_div {
          width:50px; 
        height:50px; 
        background-color:blue;
         
     } 

.clearfix:after { content: "[=11=]A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

 
 <body>
  <div class="clearfix"> 
    <div class="second_div">sfddsf</div>
    <div class="third_div">sfdsfds</div>
 </div>
    </body>

Answer 1

Clearfix 通过清除元素后的浮动来处理浮动元素。您应该用它包裹浮动元素，因此，这些元素不会从文档流中删除。在你的例子中 third_div 没有浮动。在未浮动的元素之后清除浮动没有多大意义。基本上没有什么可以清除的。另一方面，如果您在 third_div 上添加 clear: both 属性，您将清除 third_div 之前的浮动值，结果，它会添加回 second-div ] 到文档流。根据您要实现的目标，您有两种解决方案。

示例 1

如果需要将元素并排显示，可以将它们都浮动并用 clearfix 包裹它们 div。

CSS

.second_div {
    width:50px; 
    height:50px; 
    background-color:green;
    float: left;
} 
.third_div {
    width:50px; 
    height:50px; 
    background-color:blue;
    float: left;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

HTML

<div class="clearfix"> 
    <div class="second_div">Second div</div>
    <div class="third_div">Third div</div>
</div>

示例 2

如果您需要将它们一个放在另一个下显示，那么您只需将其中一个浮动并包裹起来，另一个将自动定位在下面，遵循文档流。

CSS

.second_div {
    width:50px; 
    height:50px; 
    background-color:green;
    float: left;
} 
.third_div {
    width:50px; 
    height:50px; 
    background-color:blue;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

HTML

<div class="clearfix"> 
    <div class="second_div">Second div</div>
</div>
<div class="third_div">Third div</div>

CSS clearfix 似乎不起作用

CSS clearfix doesn't seem to work

css

clearfix

示例 1

示例 2