margin-top ne fonctionne pas avec clear : both

Question

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

Pourquoi le margin:top pour 'Main Data' ne fonctionne pas dans le code ci-dessus ?

Answer 1

Vous pourriez mettre les deux divs flottants dans un autre un qui a mis "overflow : hidden" :

<div style='overflow:hidden'>
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

modifier - Pour ajouter un peu à cette réponse vieille de 5 ans : Je pense que la cause de ce comportement déroutant est le processus quelque peu compliqué de effondrement des marges . Une bonne astuce avec le HTML original de l'OP est d'ajouter une règle CSS comme celle-ci :

div { border: 1px solid transparent; }

Pouf ! Maintenant (sans mes <div> ) il fonctionne bien ! Enfin, sauf pour le pixel supplémentaire des frontières. En particulier, je pensez à c'est une combinaison de la façon dont clear: both et les règles d'écrasement des marges qui donnent lieu à la mise en page inattendue du code dans le PO.

modifier à nouveau - Pour l'histoire complète (et, je pense, complètement exacte), voir L'excellente réponse de Mark Amery . Les détails ont une certaine complexité que cette réponse passe sous silence.

Answer 2

Si Pointy montre comment envelopper les éléments flottants dans un div, vous pouvez également insérer un div vide entre les éléments flottants et la section de données principale. Par exemple :

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both;"></div>
<div style="margin-top: 200px;">Main Data</div>

Cela peut s'avérer utile dans les cas où l'ajout d'un div wrapper autour d'un certain HTML n'est pas souhaitable.

Answer 3

Pointy et Randall Cook ont d'excellentes réponses. J'ai pensé que je pourrais montrer une autre solution.

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="float: left; clear: both; margin-top: 200px;">Main Data</div>

Si vous faites du troisième élément "float : left ;" AND "clear : both ;", cela devrait avoir l'effet désiré de donner au troisième élément une marge de 200 pixels. Voici un exemple de enlace à un exemple.

Cela peut également avoir une incidence sur d'autres éléments qui suivent, à savoir s'ils doivent être flottants ou non. Cependant, cela pourrait aussi avoir l'effet désiré.

Answer 4

Solution alternative :

Vous pouvez en fait mettre un margin-bottom sur les éléments flottants pour pousser vers le bas l'élément situé en dessous qui a clear: both .

http://jsfiddle.net/9EY4R/

Note : Ayant fait cette suggestion, je dois immédiatement me rétracter car ce n'est généralement pas une bonne idée, mais dans certaines situations limitées, cela peut être approprié ;

---

<div class='order'>

    <div class='address'>
        <strong>Your order will be shipped to:</strong><br>
        Simon</br>
        123 Main St<br>
        Anytown, CA, US
    </div>

    <div class='order-details'>
        Item 1<br>
        Item 2<br>
        Item 3<br>
        Item 4<br>
        Item 5<br>
        Item 6<br>
        Item 7<br>
        Item 8<br>
        Item 9<br>
        Item 10<br>
    </div>

    <div class='options'>
        <button>Edit</button>
        <button>Save</button>
    </div>
</div>

Le panneau contenant les éléments est appelé order-details avec ce css

.order-details
{
    padding: .5em;
    background: lightsteelblue;

    float: left;
    margin-left: 1em;

    /* this margin does take effect */
    margin-bottom: 1em;
}

Dans l'exemple ci-dessus, le panneau jaune comporte une icône margin-top mais si elle n'est pas supérieure à l'élément flottant le plus haut, elle ne fera rien (bien sûr, c'est le but de cette question).

Si vous définissez le margin-top du panneau jaune à 20em, il sera visible car la marge est calculée à partir du haut du cadre bleu extérieur.

Answer 5

Utilisez plutôt "padding-top" dans votre div de données principale. Ou encore, enveloppez la div de données principale dans une seule div avec "padding-top".