CSS clearfix 似乎不起作用答案

【问题标题】：CSS clearfix doesn't seem to workCSS clearfix 似乎不起作用
【发布时间】：2017-08-19 12:01:46
【问题描述】：

我正在尝试使用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: "\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}

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

【问题讨论】：

你能给我们看看小提琴吗？
我认为您的 clearfix CSS 中存在复制错误。 css-tricks.com/snippets/css/clear-fix
确定jsfiddle.net/7vfwys43
@Seamus 我尝试了您网址中的代码但没有用，但如果我为 .third_div 都设置了 clear 则可以
我假设您希望这两个元素彼此相邻。您需要在.third_div 上添加float: left。在 50x50 的情况下，.second_div 确实位于.third_div 的顶部，并且文本被推出框外。你可以看到这个修改过的例子，我将绿色设为 50% 的不透明度。由于颜色混合，您会看到盒子看起来是青色的。 jsfiddle.net/7vfwys43/1

标签： css clearfix

【解决方案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>

【讨论】：