Margin-bottom 仅与 float-left 一起使用

Question

在我的标记中，我希望页脚的下边距为 25 像素。我这样做了：

div.footer {
   margin-bottom: 25px;
}

没有成功——没有下边距。如果我这样做：

div.footer {
   margin-bottom: 25px;
   float: left;
}

有效！

我知道！我可以用浮动来解决问题，但这是一个好习惯吗？没有别的办法吗？

提前致谢。

== 更新！ / 我的一小段代码 ==

CSS：

div.rlside-margin {
    margin: 0 25px;
}

div.tpside-margin {
    margin: 25px 0;
}

div.allside-margin {
    margin: 25px;
}

div.max-width {
   width: 60em;
   margin: 0 auto;
}

div.header {
   background-color: #efefef;
   width: 100%;
   height: 90px;
}

div.post-header {
   background-image: url("/Images/PostHeader_Background.jpg");
   width: 960px;
   height: 50px;
}

div.content {
   position: relative;
}

div.footer {
   margin-bottom: 25px;
}

HTML：

<div class="header">
    <div class="max-width">
       <a href="@Url.Action("Index", "Home")" class="logo float-left"></a>
       <ul class="navigation float-right">
          <li><a href="@Url.Action("Index", "Home")" rel="Home">Home</a></li>
          <li><a href="@Url.Action("Index", "Sobre")">Sobre</a></li>
          <li><a href="@Url.Action("Index", "Contato")">Fale conosco</a></li>
       </ul>
    </div>
</div>

<div class="max-width">
    <div class="post-header">
        <ul class="options float-left">
            <li><a href="#"><span>Ofertas</span></a></li>
            <li><a href="#"><span>Lista de compras (0)</span></a></li>
        </ul>

        <div class="search-bar float-right">
            <form>
                <input class="float-left" type="text" placeholder="Por qual produto você procura? Digite aqui" />
                <button class="magnifier"></button>
            </form>
        </div>
    </div>
</div>

<div class="content">
    @RenderBody()
</div>

<div class="max-width">
    <div class="footer">
        <div class="tbside-margin">
            <hr />
            <ul class="bottom-navigation">
                <li><a href="@Url.Action("Index", "Home")" rel="Home">Home</a></li>
                <li><a href="@Url.Action("Index", "Sobre")">Sobre</a></li>
                <li><a href="@Url.Action("Index", "Contato")">Fale conosco</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

这是因为您已将div 排除在“正常流程”之外。您可能已经浮动其他元素，有效地将它们从主流中移除。现在您要使用边距定位 div，它与已从正常流程中取出的元素无关。这就是添加浮动的原因，它将它放入一个新的流程中。

"浮动框定位在正常流程中，然后取出 流动并尽可能向左或向右移动。内容 可能会沿着浮子的一侧流动。 [...] 当一个盒子被取出 正常流量，所有仍在正常流量内的内容将被忽略 它完全没有为它腾出空间。”

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 2

这在很大程度上取决于您的布局。显示一些 html 或 URL 会有所帮助。但是，正如克里斯蒂安所说，设立这个职位会有所帮助。您也可以尝试使用position:relative;，或者也可以尝试padding-bottom:25px;，而不是margin。

Answer 3

我已经解决了！

在我的页脚导航中，我有以下标记：

<ul class="bottom-navigation">
    <li><a href="@Url.Action("Index", "Home")" rel="Home">Home</a></li>
    <li><a href="@Url.Action("Index", "Sobre")">Sobre</a></li>
    <li><a href="@Url.Action("Index", "Contato")">Fale conosco</a></li>
</ul>

还有我的 CSS：

div.footer ul.bottom-navigation li {
    float: left;
}

问题是：我无法将菜单项浮动到左侧。为什么？我不知道，但我这样做是为了解决：

div.footer ul.bottom-navigation li {
    display: inline;
}

它有效——但我不知道为什么。解释将非常受欢迎。

谢谢！

Answer 4

您需要清除浮动项的父元素上的浮动。

一些左浮动文本 更多左浮动文本

ul li span {
    float: left;
}
.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}