CSS样式格式

Question

当我降低页脚的高度时，我的页脚及其内容不会彼此成比例重新定位。

CSS代码：

#footer {
    clear: right;
    background: #d1dceb;
    text-align: right;
    padding: 20px;
    width: 70%;
    float: right;
    height: 5px;
}

#footer p.left {
    float: left;
    text-align: left;
    margin-left: 5px;
}

#footer p.right {
    float: right;
    text-align: right;
    margin-right: 5px;
}

这就是我得到的：

我应该做些什么来解决这个问题？

Answer 1

删除height并添加overflow: hidden：

#footer
{
    clear: right;
    background: #d1dceb;
    text-align: right;
    padding: 20px;
    width: 70%;
    overflow: hidden;
}

Answer 2

<div style="clear:both;"></div>

在页脚div结束之前，还尝试从页脚删除高度

Answer 3

好吧，你没有添加任何上下文和任何HTML标记。但这很重要：

#footer {
    clear: right; /* why are you doing this? **/
    background: #d1dceb;
    text-align: right;
    padding: 20px;
    width: 70%;
    float: right; /* why are you doing this? **/
    height: 5px;
}

看看那些评论的行，很可能你完全不需要。

现在，在您的问题中，您可以使用两个选项：

1）使用“clearfix”方法清除浮点数：只需添加一个空div来清除前面元素的浮点数，如下所示：

<div class="clearfix"></div>

然后在CSS中：

.clearfix{clear:both; float:none;}

显然，你可以根据需要多次使用它，因为你正在使用可重复使用的类。

选项2如下：

#footer p.right:after {content:'';clear:both; float:none; }

我们在这里做的是添加一些“空”内容，但我们为其分配"clear:both"属性以清除所有内容，或多或少，就像我们在选项1中添加了div一样

当然选项1 更好，但是，你去了

Answer 4

您正在使用float来放置元素，这意味着将浮动元素的高度设置为0，就像使用positioning: absolute一样。不要使用浮子！使用flex。

#footer {
    background: #d1dceb;
    padding: 20px;
    width: 70%;
    display: flex;
    margin: 0 auto; /* center element */
}

#footer p {
  flex: 1 1 auto; /* fill up the entire available space */
}

#footer p.right {
  text-align: right;
}

<div id="footer">
  <p>Left footer element</p>
  <p class="right">Right footer element</p>
</div>