Explication détaillée de CSS float et clear

<pre name="code" class="html">

<br>

1. L'histoire du flottement

Le savez-vous ? La première intention initiale du flottement était d'obtenir l'effet d'habillage du texte, semblable à une image dans le coin supérieur gauche, puis elle est entourée de texte, je crois que tout le monde a vu cette scène ! Cependant, depuis que le flottement a été dérivé, il y a trop d'endroits où nous devons l'utiliser. Le plus couramment utilisé est la mise en œuvre de la navigation, et il existe d'autres applications, telles que fixe d'un côté, adaptative de l'autre côté. etc. (Ceci est discuté ci-dessous. Il y aura des exemples), et le flottement sera introduit sous plusieurs aspects ci-dessous.

2. L'impact du flottement

Je crois que l'attribut float est un indispensable pour les ingénieurs front-end pour découper des dessins Un effet de style préparé, si vous ne l'avez pas utilisé, haha ​​! ! ! Cet article ne s'adresse pas à vous. Même si tout le monde aime l’utiliser, avez-vous déjà pensé aux problèmes que cela entraînerait ? Oui, le flottement est une arme à double tranchant. C'est bien de l'utiliser pour obtenir l'effet souhaité, mais si vous l'utilisez mal, vous en subirez les conséquences.

Tout d'abord, tout le monde doit savoir que tout élément avec un attribut float qui n'est pas none verra son affichage modifié en block, ce qui signifie que les éléments flottants sont blocs. Élément de niveau, peu importe ce que c'est !

Deuxièmement, tout le monde doit comprendre que le flottement provoquera l'effondrement de l'élément parent. Il existe un dicton officiel qui est BFC (contexte de format de bloc). c'est le cas, vous pouvez vérifier les informations pertinentes. Alors, comment résoudre ce problème ? Naturellement, c'est flottant, c'est-à-dire clair.

Mais effacer les flottants ne consiste pas seulement à utiliser un attribut clear Parce que cela implique des problèmes de compatibilité du navigateur, la méthode standard utilisée est la suivante : .

.clearfix{*zoom:1;}
.clearfix:after{display: table;clear: both;content: '';}

Il suffit d'utiliser ces attributs pour un flottement clair, et il est compatible avec IE7+ et d'autres navigateurs du W3C, comme indiqué ici Ensuite, cliquez sur l'attribut zoom. Cet attribut n'est efficace que dans IE7 et versions antérieures.

3. L'effet du flottement

Parlons d'abord de la fixation du côté gauche et du le côté droit étant adaptatif La mise en page, le code et les rendus sont les suivants :

	我在左侧我在左侧我在左侧我在左侧我在左侧我在左侧我在左侧我在左侧


	我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右

Rendu :

<br>

De cette façon, peu importe la largeur du p le plus à l'extérieur, la largeur du côté gauche reste inchangée, et seule la largeur de le côté droit changera automatiquement.

Il existe une autre méthode de mise en œuvre :

	我在左侧我在左侧我在左侧我在左侧我


	我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右

La seconde est basée sur la gauche Vous pouvez l'exécuter et voir l'exemple de largeur latérale et de côté droit adaptatif.

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!