IE7 Cleafix 不工作答案

【问题标题】：IE7 cleafix not workingIE7 Cleafix 不工作
【发布时间】：2012-10-21 00:17:13
【问题描述】：

我在使用 IE7 时遇到问题，并在此页面上清除浮动：

https://dev.editionpatrickfrey.com/de/books/miss-martin-guggisberg

我正在使用 Sass pie-clearfix(); mixin 并尝试了所有可能的其他 clearfixes 都没有成功。这里有什么问题？

【问题讨论】：

【解决方案1】：

下面的 ClearFix 可以应用于浮动子元素的父级和/或作为浮动元素下方的元素。这应该涵盖 IE6 - IE10。

.clear:before,
.clear:after {
    content: "";
    display: table;
} 
.clear:after {
    clear: both;
}
.clear {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

我个人使用此 ClearFix，但要了解有关此 ClearFix 的更多信息，请查看此链接：http://css-tricks.com/snippets/css/clear-fix/

希望这会有所帮助！

【讨论】：

【解决方案2】：

需要将floatstop添加到包含浮动元素的父元素：

CSS：

.floatstop:after {
 content: ".";
 display :block;
 height :0;
 clear :both;
 visibility :hidden;
}
*:first-child+html .floatstop {min-height: 1px;}/* ie7 fix */
* html .floatstop {height: 1%;}/* ie6 fix */

HTML：

<div class="floatstop">
 <div>floated div</div>
 <div>floated div</div>
</div>

【讨论】：

【解决方案3】：

我意识到我需要一个包装容器来执行此操作。我只是想在一层上清除浮动元素。使用 Sass pie-clearfix() 添加容器； mixin 解决了这个问题。

【讨论】：