1

这非常令人困惑，我正在使用 BootStrap 中的 clearfix 类来尝试简单地清除页脚，但它不起作用。我的代码如下：

<div>
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="footer clearfix">Footer</div>
</div>

.left {
    background-color: red;
    float: left;
}

.right {
    background-color: blue;
    float: right;
}

.footer {
      background-color: orange;
}

// Clear fix
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

我在这里提琴：http: //jsfiddle.net/RYYFw/3/

请您告知为什么这个简单的清理不起作用？

4

4 回答 4

4

您需要添加clear: both到您的页脚：

.footer {
    background-color: orange;
    clear: both;
}

请参阅更新的 jsFiddle。

于 2013-03-25T10:09:00.430 回答
0

clearfix不起作用，因为您通常会使用它来根据其中浮动的元素为父容器提供高度值。

你应该使用的是clear: both;

因此，您应该在页脚上应用它：

.footer {
  background-color: orange;
  clear: both;
}
于 2013-03-25T10:13:20.850 回答
0

添加clear:both到 .footer

.footer {
      background-color: orange; clear: both;
}

演示

于 2013-03-25T10:10:14.983 回答
0

有问题的 Cleafix 与您认为的不同。

在这种情况下，引导程序 clearfix 意味着具有clearfix该类的任何浮动元素都将具有适当的高度（默认情况下，如果浮动元素位于非浮动元素内，则非浮动元素的高度将为 0）

（为了更好的http://css-tricks.com/all-about-floats/）

你想要的是一种清除页脚的方法，如下所示：

.clear { clear: both; }

该clear属性表示浮动元素不允许在所述元素的任何一侧（也可以左右分配）

于 2013-03-25T10:15:00.430 回答