Margin-bottom just working with float-left

问题

On my markup I expect the footer with 25 pixels of bottom margin. I did this:

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

Without success — there is no bottom margin. If I do this:

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

It works!

I know! I can solve the problem with floating, but it is a good practice? There is no other way?

Thanks in advance.

== UPDATE! / A little piece of my code ==

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>

回答1:

This is occurring because you've taken div out of the "normal flow." You've likely floated other elements, effectively taking them out of the main flow. Now that you want to position the div with margins it's not relative to the elements that have been taken out of the normal flow. That's why adding the float works, it places it into a new flow.

"A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. [...] When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it."

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

回答2:

That's gonna depend a lot on your layout. Showing some html or URL would help. But, as Christian said, setting up the position would help. You might also try with position:relative; or also, instead of margin, try padding-bottom:25px;

回答3:

I've solved!

At my footer's navigation, I have the follow markup:

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

And my CSS:

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

The question is: I can't float my menu items to the left. Why? I don't know, but I did this to resolve:

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

It works — but I don't know why. The explanation will be very welcome.

Thanks!

回答4:

You need to clear the float on the floated item's parent element.

Some left floated text Some more left floated text

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

来源：https://stackoverflow.com/questions/16736255/margin-bottom-just-working-with-float-left

标签

html

css

margin