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;

而不是保证金

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;
}

边缘底部只是浮动左边

4 个答案: