Quelles méthodes de «correction» puis-je utiliser?
J'ai le problème séculaire d'un div enveloppant une mise en page à deux colonnes. Ma barre latérale est flottante, donc mon conteneur div ne parvient pas à envelopper le contenu et la barre latérale.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
Il semble y avoir de nombreuses méthodes pour corriger le bogue clair dans Firefox:
<br clear="all"/>overflow:autooverflow:hidden
Dans mon cas, le seul qui semble fonctionner correctement est la solution <br clear="all"/>, qui est un peu délabrée. overflow:auto me donne des barres de défilement désagréables, et overflow:hidden doit sûrement avoir des effets secondaires. En outre, IE7 ne devrait apparemment pas souffrir de ce problème en raison de son comportement incorrect, mais dans mon cas, il souffre de la même chose que Firefox.
Quelle méthode actuellement disponible est la plus robuste?
En fonction de la conception produite, chacune des solutions CSS clearfix ci-dessous présente ses propres avantages.
Le clearfix a des applications utiles, mais il a également été utilisé comme un hack. Avant d’utiliser un correctif, ces solutions css modernes peuvent être utiles:
Solutions Clearfix modernes
Conteneur avec overflow: auto;
Le moyen le plus simple d'effacer les éléments flottants consiste à utiliser le style overflow: auto sur l'élément conteneur. Cette solution fonctionne dans tous les navigateurs modernes.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Un inconvénient, l’utilisation de certaines combinaisons de marge et de remplissage sur l’élément externe peut faire apparaître des barres de défilement, mais cela peut être résolu en plaçant la marge et le remplissage sur un autre élément contenant le parent.
L’utilisation de ‘overflow: hidden’ est également une solution de clearfix, mais elle n’aura pas de barre de défilement. Toutefois, l’utilisation de hidden recadrera tout contenu placé en dehors de l’élément conteneur.
Remarque: L'élément flottant est une balise img dans cet exemple, mais peut être n'importe quel élément html.
Clearfix Reloaded
Thierry Koblentz sur CSSMojo a écrit: Le tout dernier clearfix rechargé . Il a noté qu'en supprimant le support pour oldIE, la solution peut être simplifiée en une déclaration CSS. De plus, l'utilisation de display: block (au lieu de display: table) permet aux marges de se réduire correctement lorsque les éléments avec clearfix sont frères.
.container::after {
content: "";
display: block;
clear: both;
}
Ceci est la version la plus moderne du clearfix.
⋮
⋮
Solutions Clearfix antérieures
Les solutions ci-dessous ne sont pas nécessaires pour les navigateurs modernes, mais peuvent s'avérer utiles pour cibler des navigateurs plus anciens.
Notez que ces solutions reposent sur des bogues de navigateur et ne doivent donc être utilisées que si aucune des solutions ci-dessus ne fonctionne pour vous.
Ils sont énumérés approximativement par ordre chronologique.
"Beat That ClearFix", un correctif pour les navigateurs modernes
Thierry Koblentz 'de CSS Mojo a souligné que, lorsque vous ciblez des navigateurs modernes, vous pouvez maintenant supprimer les propriétés/valeurs zoom et ::before et simplement utiliser:
.container::after {
content: "";
display: table;
clear: both;
}
Cette solution ne supporte pas exprès IE 6/7!
Thierry propose également: " n mot d'avertissement : si vous démarrez un nouveau projet à partir de rien, foncez, mais n'échangez pas cette technique avec celle que vous avez maintenant, car même si vous ne le faites pas support oldIE, vos règles existantes empêchent de réduire les marges. "
Micro Clearfix
La solution clearfix la plus récente et la plus répandue au monde, la Micro Clearfix de Nicolas Gallagher .
Prise en charge connue: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6 +
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Propriété de débordement
Cette méthode de base est préférée dans le cas habituel, lorsque le contenu positionné ne sera pas affiché en dehors des limites du conteneur.
http://www.quirksmode.org/css/clearing.html - explique comment résoudre les problèmes courants liés à cette technique, à savoir la définition de width: 100% sur le conteneur. .
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Plutôt que d'utiliser la propriété display pour définir "hasLayout" pour IE, d'autres propriétés peuvent être utilisées pour en déclenchant "hasLayout" pour un élément .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Une autre façon de supprimer les éléments flottants à l'aide de la propriété overflow consiste à utiliser le caractère haussement de soulignement IE appliquera les valeurs précédées du trait de soulignement, les autres navigateurs ne le feront pas. La propriété zoom déclenche hasLayout dans IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Bien que cela fonctionne ... il n'est pas idéal d'utiliser des hacks.
PIE: Méthode de nettoyage facile
Cette ancienne méthode "Easy Clearing" présente l'avantage de permettre aux éléments positionnés de rester en dehors des limites du conteneur, au détriment de CSS plus compliqués.
Cette solution est assez ancienne, mais vous pouvez tout apprendre sur Clear Clearing sur Position Is Everything: http://www.positioniseverything.net/easyclearing.html
Elément utilisant la propriété "clear"
La solution rapide et délicate (avec certains inconvénients) lorsque vous claquez rapidement quelque chose:
<br style="clear: both" /> <!-- So dirty! -->
Désavantages
- Il ne réagit pas et risque donc de ne pas fournir l'effet souhaité si les styles de mise en page changent en fonction des requêtes de support. Une solution en CSS pur est plus idéale.
- Il ajoute un balisage HTML sans nécessairement ajouter de valeur sémantique.
- Cela nécessite une définition et une solution en ligne pour chaque instance plutôt qu'une référence de classe à une solution unique de "clearfix" dans le fichier css et à des références de classe au format HTML.
- Cela rend le code difficile à utiliser pour les autres car ils peuvent avoir à écrire plus de hacks pour le contourner.
- À l'avenir, lorsque vous aurez besoin/souhaitez utiliser une autre solution de clearfix, vous n'aurez plus à revenir en arrière pour supprimer toutes les balises
<br style="clear: both" />jonchant le balisage.
Quels problèmes essayons-nous de résoudre?
Il y a deux considérations importantes à prendre en compte lorsqu’on flotte:
Contenant des flottants descendants. Cela signifie que l'élément en question est suffisamment grand pour englober tous les descendants flottants. (Ils ne traînent pas dehors.)
![Floating content hanging outside its container]()
Isoler les descendants des flotteurs extérieurs. Cela signifie que les descendants d'un élément devraient pouvoir utiliser
clear: bothet ne pas interagir avec les flotteurs situés à l'extérieur. l'élément.![<code>clear: both</code> interacting with a float elsewhere in the DOM]()
Bloquer les contextes de formatage
Il n'y a qu'une seule façon de faire les deux. Et cela consiste à établir un nouveau contexte de formatage de bloc . Les éléments qui établissent un contexte de formatage de bloc sont un rectangle isolé dans lequel les flottants interagissent les uns avec les autres. Un contexte de mise en forme de bloc sera toujours suffisamment grand pour encapsuler visuellement ses descendants flottants, et aucun flottant en dehors d'un contexte de mise en forme de bloc ne peut interagir avec des éléments se trouvant à l'intérieur. Cette isolation à double sens est exactement ce que vous voulez. Dans IE, ce même concept s'appelle hasLayout , ce qui peut être défini via zoom: 1.
Il existe plusieurs façons d’établir un contexte de formatage de bloc, mais la solution que je recommande est display: inline-block avec width: 100%. (Bien sûr, il y a les mises en garde habituelles avec width: 100%, utilisez donc box-sizing: border-box ou mettez padding, margin et border sur un élément différent.)
La solution la plus robuste
L'application la plus courante des flottants est probablement la disposition en deux colonnes. (Peut être étendu à trois colonnes.)
D'abord la structure du balisage.
<div class="container">
<div class="sidebar">
sidebar<br/>sidebar<br/>sidebar
</div>
<div class="main">
<div class="main-content">
main content
<span style="clear: both">
main content that uses <code>clear: both</code>
</span>
</div>
</div>
</div>
Et maintenant le CSS.
/* Should contain all floated and non-floated content, so it needs to
* establish a new block formatting context without using overflow: hidden.
*/
.container {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
/* Fixed-width floated sidebar. */
.sidebar {
float: left;
width: 160px;
}
/* Needs to make space for the sidebar. */
.main {
margin-left: 160px;
}
/* Establishes a new block formatting context to insulate descendants from
* the floating sidebar. */
.main-content {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
Essayez vous-même
Allez à JS Bin pour jouer avec le code et voir comment cette solution est construite à partir de la base.
Les méthodes traditionnelles de clearfix considérées nuisibles
Le problème avec les solutions traditionnelles clearfixsolutions est qu’elles utilisent deux concepts de rendu différents pour atteindre le même objectif pour IE et pour tous les autres. Dans IE, ils utilisent hasLayout pour établir un nouveau contexte de formatage de bloc, mais pour tout le monde, ils utilisent des zones générées (:after) avec clear: both, ce qui ne permet pas d'établir un nouveau contexte de formatage de bloc. . Cela signifie que les choses ne se comporteront pas de la même manière dans toutes les situations. Pour une explication de la cause de ce problème, voir Tout ce que vous savez sur Clearfix est faux .
La nouvelle norme utilisée par Inuit.css et Bourbon - deux frameworks CSS/Sass très largement utilisés et bien maintenus:
.btcf:after {
content:"";
display:block;
clear:both;
}
Remarques
Gardez à l'esprit que les correctifs sont essentiellement un hack pour ce que flexbox dispositions peuvent maintenant fournir de manière beaucoup plus intelligente . Les flottants CSS ont été conçus à l'origine pour que le contenu en ligne puisse circuler - comme les images dans un long article textuel - et non pour les dispositions de grille, etc. Si votre les navigateurs cibles prennent en charge flexbox , cela vaut la peine de regarder.
Cela ne supporte pas IE7. Vous ne devriez pas supporter IE7. Cela continue d'exposer les utilisateurs à des failles de sécurité non corrigées et complique la tâche de tous les autres développeurs Web, car cela réduit la pression sur les utilisateurs et les organisations pour passer aux navigateurs modernes.
Ce clearfix était annoncé et expliqué par Thierry Koblentz en juillet 2012. Il supprime un poids inutile de micro-clearfix 2011 de Nicolas Gallagher . Dans le processus, il libère un pseudo-élément pour votre propre usage. Cela a été mis à jour pour utiliser display: block plutôt que display: table (encore une fois, crédit à Thierry Koblentz).
Je recommande d'utiliser les éléments suivants, qui proviennent de http://html5boilerplate.com/
/* >> The Magnificent CLEARFIX << */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
La propriété overflow peut être utilisée pour supprimer les flottants sans majoration supplémentaire:
.container { overflow: hidden; }
Cela fonctionne pour tous les navigateurs sauf IE6, où tout ce que vous avez à faire est d'activer hasLayout (le zoom étant ma méthode préférée):
.container { zoom: 1; }
J'ai trouvé un bogue dans la méthode officielle CLEARFIX: le DOT n'a pas de taille de police. Et si vous définissez le height = 0 et que le premier élément de votre arbre DOM possède la classe "clearfix", vous aurez toujours une marge au bas de la page de 12px :)
Vous devez le réparer comme ça:
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
Cela fait maintenant partie de la mise en page YAML ... Jetez-y un coup d'œil - c'est très intéressant! http://www.yaml.de/en/home.html
C'est une solution plutôt ordonnée:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
Il est connu pour fonctionner dans Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+.
Il n'est pas nécessaire d'inclure le sélecteur: before pour effacer les flottants, mais cela empêche les marges supérieures de s'effondrer dans les navigateurs modernes. Cela garantit la cohérence visuelle avec IE 6/7 lorsque le zoom: 1 est appliqué.
Clearfix de bootstrap:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
Je viens d'utiliser: -
.clear:after{
clear: both;
content: "";
display: block;
}
Fonctionne mieux et compatible avec IE8 + :)
Compte tenu de l'énorme quantité de réponses que je n'allais pas poster. Cependant, cette méthode peut aider quelqu'un, comme elle m'a aidé.
Restez à l'écart des flotteurs autant que possible
Il vaut la peine de mentionner que j'évite les flotteurs comme Ebola. Il y a beaucoup de raisons et je ne suis pas seul; Lisez la réponse de Rikudo à propos de qu'est-ce qu'un clearfix et vous verrez ce que je veux dire. Dans ses propres mots: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...
Il existe d’autres bonnes (et parfois meilleures) options autres que les flotteurs. Au fur et à mesure que la technologie avance et s’améliore, flexbox (et d’autres méthodes) seront largement adoptées et les flotteurs deviendront un mauvais souvenir. Peut-être un CSS4?
Float mauvaise conduite et échec efface
Tout d’abord, parfois, vous pouvez penser que vous êtes à l’abri des flotteurs jusqu’à ce que votre bouée de sauvetage soit percée et que votre flux html commence à couler:
Dans le codepen http://codepen.io/omarjuvera/pen/jEXBya ci-dessous, la pratique consistant à nettoyer un flottant avec <div classs="clear"></div> (ou un autre élément) est courante mais désapprouvée et anti- sémantique.
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
div {
border: 1px solid #f00;
width: 200px;
height: 100px;
}
div.floated {
float: left;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
Cependant , juste au moment où vous pensiez que votre flotteur est digne de naviguer ... boum! Lorsque la taille de l'écran devient de plus en plus petite, vous voyez des comportements étranges comme dans le graphique ci-dessous (Idem http://codepen.io/omarjuvera/pen/jEXBya ):
Pourquoi devez-vous vous en soucier? Je ne suis pas sûr du chiffre exact, mais environ 80% (ou plus) des appareils utilisés sont des appareils mobiles avec un petit écran. Les ordinateurs de bureau/portables ne sont plus le roi.
Ça ne s'arrête pas là
Ce n'est pas le seul problème avec les flotteurs. Il y en a beaucoup, mais dans cet exemple, certains peuvent dire all you have to do is to place your floats in a container. Mais comme vous pouvez le voir dans le codepen et le graphique, ce n'est pas le cas. Cela a apparemment empiré les choses:
HTML
<div id="container" class="">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
#container {
min-height: 100px; /* To prevent it from collapsing */
border: 1px solid #0f0;
}
.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
En ce qui concerne le résultat?
C'est le même! 
Au moins, vous organiserez une fête CSS, en invitant toutes sortes de sélecteurs et de propriétés. faire un plus grand désordre de votre CSS que ce que vous avez commencé avec. Juste pour réparer votre float.
CSS Clearfix à la rescousse
Ce morceau de CSS simple et très adaptable est une beauté et un "sauveur":
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
C'est ça! Cela fonctionne vraiment sans casser la sémantique et ai-je mentionné ça marche? :
Du même échantillon ... HTML
<div class="clearfix">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div>
<section>Below</section>
CSS
div.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
section {
border: 4px solid #00f;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
Maintenant, nous n'avons plus besoin de <div classs="clear"></div> <!-- Acts as a wall --> et contentons la police sémantique. Ce n'est pas le seul avantage. Ce clearfix réagit à toute taille d'écran sans utiliser @media dans sa forme la plus simple. En d’autres termes, il maintiendra votre conteneur flottant sous contrôle et empêchera les inondations. Enfin, il prend en charge les anciens navigateurs dans une seule petite opération de karaté =)
Voici à nouveau le clearfix
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
Je laisse toujours flotter les sections principales de ma grille et applique clear: both; au pied de page. Cela ne nécessite pas un div supplémentaire ou une classe.
.clearFix:after {
content: "";
display: table;
clear: both;
}
honnêtement; toutes les solutions semblent être un hack pour résoudre un bogue de rendu ... est-ce que je me trompe?
j'ai trouvé que <br clear="all" /> était le plus simple, le plus simple. voir class="clearfix" partout ne peut pas émouvoir la sensibilité de quelqu'un qui s'oppose à des éléments de balisage superflus, n'est-ce pas? vous ne faites que peindre le problème sur une autre toile.
j'utilise également la solution display: hidden, qui est excellente et ne nécessite aucune déclaration de classe supplémentaire ni balisage HTML ... mais vous avez parfois besoin d'éléments pour déborder du conteneur, par exemple. jolis rubans et ceintures
Avec LESS ( http://lesscss.org/ ), vous pouvez créer un assistant pratique pour clearfix:
.clearfix() {
zoom: 1;
&:before {
content: '';
display: block;
}
&:after {
content: '';
display: table;
clear: both;
}
}
Et utilisez-le ensuite avec des conteneurs problématiques, par exemple:
<!-- HTML -->
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
/* LESS */
div#container {
.clearfix();
}
Utiliser overflow:hidden/auto et height pour ie6 suffiront si le conteneur flottant a un élément parent.
L'un ou l'autre des #test peut fonctionner, car le code HTML indiqué ci-dessous permet de supprimer les éléments flottants.
#test {
overflow:hidden; // or auto;
_height:1%; forces hasLayout in IE6
}
<div id="test">
<div style="floatLeft"></div>
<div style="random"></div>
</div>
Dans les cas où cela refuse de travailler avec ie6, il suffit de faire flotter le parent pour effacer le flottant.
#test {
float: left; // using float to clear float
width: 99%;
}
Jamais vraiment eu besoin d'aucun autre type de compensation pour le moment. C'est peut-être ainsi que j'écris mon code HTML.
J'ai essayé toutes ces solutions, une grande marge sera ajoutée à l'élément <html> automatiquement lorsque j'utilise le code ci-dessous:
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
Enfin, j'ai résolu le problème de la marge en ajoutant font-size: 0; au CSS ci-dessus.
Avec SASS, le clearfix est:
@mixin clearfix {
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
*zoom: 1;
}
et c'est utilisé comme:
.container {
@include clearfix;
}
si vous voulez le nouveau clearfix:
@mixin newclearfix {
&:after {
content:"";
display:table;
clear:both;
}
}
Une nouvelle valeur d'affichage semble faire le travail sur une ligne.
display: flow-root;
A partir de la spécification w3: "L'élément génère une boîte de conteneur de blocs et affiche son contenu à l'aide d'une présentation de flux. Il établit toujours un nouveau contexte de formatage de bloc pour son contenu."
Informations: https://www.w3.org/TR/css-display-3/#valdef-display-flow-roothttps://www.chromestatus.com/feature/5769454877147136
Comme indiqué dans le lien ci-dessus, la prise en charge est actuellement limitée, de sorte que la prise en charge de secours comme ci-dessous peut être utile: https://github.com/fliptheweb/postcss-flow-root
Un correctif est un moyen pour un élément de se vider automatiquement après lui-même, de sorte que vous n'avez pas besoin d'ajouter de balisage supplémentaire.
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.cleaner {
clear: both;
}
Normalement, vous devez faire quelque chose comme suit:
<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->
Avec clearfix, il vous suffit de
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
Je ferais aussi flotter #content, ainsi les deux colonnes contiendraient des flottants. Aussi parce que cela vous permettra d'effacer des éléments à l'intérieur de #content sans effacer la barre latérale.
Même chose avec le wrapper, vous devez en faire un contexte de formatage de bloc pour envelopper les deux colonnes.
Cet article mentionne quelques déclencheurs que vous pouvez utiliser: contextes de formatage de bloc .
Pourquoi simplement essayer d'utiliser css hack pour faire ce que 1 ligne de HTML fait le travail. Et pourquoi ne pas utiliser le code sémantique html tu put break pour revenir à la ligne?
Fo me vaut vraiment mieux utiliser:
<br style="clear:both" />
Et si vous ne voulez pas de style dans votre code HTML, il vous suffit d'utiliser class pour votre rupture et de mettre .clear { clear:both; } dans votre code CSS.
Avantage de ceci:
- Utilisation sémantique de HTML pour revenir à la ligne
- Si aucune charge CSS ne fonctionnera
- Pas besoin de code CSS supplémentaire et Hack
- pas besoin de simuler le br avec CSS, il existe déjà en HTML
En supposant que vous utilisez cette structure HTML:
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
Voici le CSS que j'utiliserais:
div#container {
overflow: hidden; /* makes element contain floated child elements */
}
div#content, div#sidebar {
float: left;
display: inline; /* preemptively fixes IE6 dobule-margin bug */
}
J'utilise cet ensemble tout le temps et cela fonctionne bien pour moi, même dans IE6.
J'utilise toujours le micro-clearfix :
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.cf {
*zoom: 1;
}
Dans Cascade Framework je l'applique même par défaut sur les éléments de niveau bloc. OMI, son application par défaut aux éléments de niveau bloc confère aux éléments de niveau bloc un comportement plus intuitif que leur comportement traditionnel. Il m'a également été beaucoup plus facile d'ajouter la prise en charge des navigateurs plus anciens à Cascade Framework (qui prend en charge IE6-8 ainsi que les navigateurs modernes).
Contrairement aux autres correctifs, voici un exemple ouvert sans conteneurs
D’autres correctifs nécessitent soit que l’élément flottant soit dans un conteneur bien délimité, soit qu’il faut un <div> supplémentaire, sémantiquement vide. Inversement, une séparation claire du contenu et du balisage nécessite une solution CSS stricte pour résoudre ce problème.
Le simple fait qu'il faille marquer la fin d'un float ne permet pas la composition CSS sans assistance .
Si ce dernier est votre objectif, le flotteur doit rester ouvert pour que tout le reste (paragraphes, listes ordonnées et non ordonnées, etc.) l'enroule, jusqu'à ce qu'un "correctif" soit rencontré. Par exemple, le correctif pourrait être défini par un nouvel en-tête.
C'est pourquoi j'utilise le clearfix suivant avec de nouveaux titres:
h1 {
clear: both;
display: inline-block;
width: 100%;
}
Cette solution est largement utilisée sur mon site web pour résoudre le problème: le texte situé à côté d'une miniature flottante est court et la marge supérieure du prochain objet à clarifier n'est pas respectée.
Il empêche également toute intervention manuelle lors de la génération automatique de PDF à partir du site. Voici un exemple de page .
Vous pouvez aussi mettre ceci dans votre CSS:
.cb:after{
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
*:first-child+html .cb{zoom: 1} /* for IE7 */
Et ajoutez la classe "cb" à votre div parent:
<div id="container" class="cb">
Vous n'aurez pas besoin d'ajouter quoi que ce soit à votre code d'origine ...
#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}<div id="container">
<div id="content">text 1 </div>
<div id="sidebar">text 2</div>
<div class="clear"></div>
</div>