Question

这非常令人困惑，我正在使用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/

请问您为什么这个简单的清算不起作用？

Answer 1

您需要在页脚中添加clear: both：

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

请参阅updated jsFiddle。

Answer 2

将clear:both添加到.footer

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

<强> DEMO

Answer 3

clearfix无效，因为您通常会使用它来为父容器提供一个基于其内部元素浮动的高度值。

您应该使用的是clear: both;

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

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

Answer 4

有问题的cleafix与您的想法不同。

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

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

你想要的是一种清除页脚的方法：

.clear { clear: both; }

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

清除两个浮动div的页脚

4 个答案: