CSS clearfix 似乎不起作用
Posted
技术标签:
【中文标题】CSS clearfix 似乎不起作用【英文标题】：CSS clearfix doesn't seem to work 【发布时间】：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
【参考方案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 似乎不起作用的主要内容，如果未能解决你的问题，请参考以下文章