margin-top ne fonctionne pas avec clear: les deux

Left
Right
Main Data

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

Vous pouvez mettre les deux divs flottants dans un autre qui a “overflow: hidden” set:

 
Left
Right
Main Data

Alors que Pointy montre comment vous pouvez encapsuler 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:

 
Left
Right
Main Data

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

La logique derrière cela dans la spécification est époustouflante, et implique une interaction compliquée des règles pour le dédouanement et l’ effondrement des marges .

Vous êtes probablement familier avec le modèle de boîte CSS classique, dans lequel la boîte de contenu est contenue dans une boîte de remplissage contenue dans une boîte de bordure contenue dans une zone de marge :

Diagramme du modèle de boîte

Pour les éléments avec clear défini sur autre chose que none , un composant supplémentaire peut être introduit dans ce modèle: l’ autorisation .

Les valeurs autres que «aucune» introduisent potentiellement une clairance . Le dégagement empêche la réduction de la marge et agit comme un espacement au-dessus de la marge supérieure d’un élément.

En d’autres termes, le modèle de boîte dans ces cas ressemble plus à ceci:

Modèle de boîte avec «dégagement» ajouté au-dessus de la zone de marge

Mais quand le dédouanement est-il introduit et quelle devrait être sa taille? Commençons par la première de ces questions. La spécification dit :

Calculer le dégagement d’un élément sur lequel est défini «clear» est effectué en déterminant d’abord la position hypothétique du bord supérieur de l’élément. Cette position est l’endroit où le bord de la bordure supérieure aurait été si la propriété “clear” de l’élément avait été “none”.

Si cette position hypothétique du bord supérieur de l’élément ne dépasse pas les flottants pertinents, alors la clairance est introduite et les marges s’effondrent conformément aux règles du 8.3.1.

Appliquons cette logique au code du demandeur. Rappelez-vous, nous essayons d’expliquer la position de la troisième div dans le code ci-dessous (arrière-plans ajoutés pour faciliter la visualisation):

 
Left
Right
Main Data

Pointy et Randall Cook ont ​​d’excellentes réponses. Je pensais montrer une autre solution.

 
Left
Right
Main Data

Si vous faites le 3ème élément “float: left;” ET “clair: les deux”, il devrait avoir l’effet désiré de donner au 3ème élément une marge de 200 pixels. Voici un lien vers un exemple.

Cela pourrait également affecter d’autres éléments de suivi quant à savoir s’ils doivent être flottants ou non. Cependant, cela pourrait aussi avoir l’effet désiré.

Solution alternative:

Vous pouvez en fait placer une margin-bottom sur les éléments flottants pour appuyer sur l’élément en dessous qui est clear: both .

http://jsfiddle.net/9EY4R/

entrer la description de l'image ici

Note: Après avoir fait cette suggestion, je dois la retirer immédiatement car ce n’est généralement pas une bonne idée, mais dans certaines situations limitées, cela peut être approprié;


 
Your order will be shipped to:
Simon 123 Main St
Anytown, CA, US
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Le panneau avec des é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 le violon ci-dessus – le panneau jaune a une margin-top , mais à moins qu’il soit plus grand que l’élément flottant le plus grand, il ne fera rien (bien sûr, c’est tout l’intérêt 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 boîte bleue extérieure.

Utilisez plutôt ‘padding-top’ dans votre div principal de données. Ou, alternativement, envelopper les données principales div en un avec «padding-top».

Essayez de définir une marge inférieure sur l’un des éléments flottants. Vous pouvez également encapsuler les flottants dans un élément parent et utiliser un hachage CSS pour le supprimer sans balisage supplémentaire .

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

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 effaçant les éléments, vous pouvez les utiliser.

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

Pour ton exemple tu pourrais faire quelque chose comme

 
Left
Right
Main Data