web-dev-qa-db-fra.com

margin-top ne fonctionne pas avec clear: les deux

<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 "Données principales" ne fonctionne-t-il pas dans le code ci-dessus?

csscss-float
65
Vishal

Vous pouvez mettre les deux div flottantes dans une autre avec le "débordement: caché" set:

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

edit - Pour ajouter quelque chose à cette réponse vieille de 5 ans: Je pense que la cause du comportement déroutant est le processus un peu compliqué de margin collapse . Une bonne astuce avec le code HTML d'origine de l'OP consiste à ajouter une règle CSS comme celle-ci:

div { border: 1px solid transparent; }

Pouf! Maintenant (sans mon <div> supplémentaire) cela fonctionne très bien! Eh bien, sauf pour ce pixel supplémentaire des frontières. En particulier, je pense, c'est une combinaison de la façon dont fonctionne clear: both et des règles de réduction de la marge qui entraînent une mise en page inattendue à partir du code de l'OP.

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

65
Pointy

Alors que Pointy montre comment vous pouvez envelopper les flottants dans un div, vous pouvez également insérer un div vide entre les 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 wrapper div autour de certains codes HTML n'est pas souhaitable.

19
Randall Cook

Pointy et Randall Cook ont ​​d'excellentes réponses. Je pensais 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 le 3ème élément "float: left;" AND "clear: both;", cela devrait avoir pour effet de donner au 3ème élément une marge de 200 pixels. Voici un link à un exemple.

Cela pourrait également affecter d'autres éléments de suivi pour déterminer s'ils doivent être flottants ou non. Cependant, cela pourrait aussi avoir l'effet désiré.

7
rvbyron

Solution alternative:

Vous pouvez réellement mettre un margin-bottom sur les éléments flottants en Push DOWN l'élément en dessous qui a clear: both.

http://jsfiddle.net/9EY4R/

enter image description here

Remarque: cette suggestion étant faite, je dois la retirer immédiatement car ce n’est généralement pas une bonne idée, mais dans certaines situations limitées, il 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 avec les éléments s'appelle 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 le violon ci-dessus - le panneau jaune a un margin-top, mais s'il n'est pas plus grand que l'élément flottant le plus grand, il ne fera rien (c'est bien le but de cette question).

Si vous définissez le margin-top du panneau jaune sur 20em, il sera visible car la marge est calculée à partir du haut de la zone bleue extérieure.

4
Simon_Weaver

Utilisez plutôt 'padding-top' dans votre principale division de données. Ou, alternativement, encapsulez la principale division de données en une seule avec "padding-top".

2
freeworlder

Essayez de définir une marge inférieure sur l'un des éléments flottants. Sinon, vous pouvez envelopper les flottants dans un élément parent et utiliser un hack CSS pour le supprimer sans balise supplémentaire .

0
Jack Cheng

Parfois, une combinaison de position relative et de marge peut résoudre ce type de problèmes.

J'utilise cette technique pour mes classes alignright et alignleft dans WordPress.

Par exemple, si je veux une "marge inférieure" qui soit respectée en éliminant les éléments que vous pouvez utiliser.

.alignright{
   float: right;
   margin-left: 20px;
   margin-top: 20px;
   position: relative;
   top: -20px;
}

Pour votre exemple, vous pourriez faire quelque chose comme 

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