Question

我尝试使用clearfix而不是同时清除它们，但由于某些原因它不起作用。我做了所有的教程。

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

＆＃13;

    * {
        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: "\00A0"; 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}

＆＃13;

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

＆＃13;

Answer 1

Clearfix通过清除元素后面的浮点数来处理浮动元素。您应该用它包装浮动元素，因此，这些元素不会从文档流中删除。在您的示例中，third_div未浮动。在没有浮动的元素之后清除浮动没有多大意义。基本上没有什么可以清除的。另一方面，如果您在clear: both上添加third_div属性，则会在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似乎不起作用

1 个答案:

示例1

示例2