Comment utiliser intelligemment CSS clear : les deux pour effacer les flottants (avec code)

Lors de la mise en page, les flottants sont souvent utilisés et les flottants sont forcément effacés. Cet article vous expliquera comment utiliser intelligemment clear:both pour effacer les flottants. , j'espère que cela vous aidera !

Lorsque nous utilisons div+css ou xhtml+css lors de la création de pages Web, nous rencontrerons des situations très étranges. La mise en page est évidemment correcte, mais l'ensemble est parfois confus sous IE6. , quand je le regarde dans IE7 ou Firefox, c'est un désastre. Peu importe comment je le calcule, je ne peux tout simplement pas corriger la mise en page. En fait, tout cela est causé par float, qui est float en CSS. Pour résoudre le problème, vous devez utiliser clear: Both.

Le manuel CSS explique ceci : La valeur de cette propriété indique le côté sur lequel les objets flottants ne sont pas autorisés. Cet attribut est utilisé pour contrôler la position physique de l'attribut float dans le flux de documents.

Lorsque l'attribut est défini sur float (float), sa position physique est déjà hors du flux de documents, mais la plupart du temps nous espérons que le flux de documents pourra reconnaître float (float), ou nous espérons que float (float) Les éléments suivants ne sont pas affectés par float (float). Pour le moment, nous devons utiliser clear: Both pour clear;

Code du programme :

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>

S'il n'est pas nécessaire d'effacer le flottant, alors le texte de la colonne 3 sera avec le texte des colonnes 1 et 2, nous en ajoutons donc un à la troisième colonne Clear float clear:both;

Habituellement, nous définissons souvent un style CSS distinct pour "clear float", tel que :

Code de programme

.clear {
clear: both;
}

Utilisez ensuite

pour "effacer les flottants" spécifiquement.
Cependant, certaines personnes ne sont pas d'accord sur le fait que vous n'avez pas besoin d'écrire

et de simplement l'effacer directement dans la couche inférieure.
Par exemple, le

code de programme

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:both;">这个是第3列。</p>

initialement bon doit être transformé en un

code de programme

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<div class="clear"></div>
<p>这个是第3列。</p>

Il semble que

n'ait pas besoin d'être écrit.
Mais évidemment, nous avons encore une situation très courante dans la conception de sites Web :

Code du programme

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
</div>
<p style="clear:both;">第三段内容</p>

Le test de page sous IE fonctionne comme prévu : Il y en a. deux blocs de couleur, rouge et jaune, à l'intérieur du bloc bleu. En même temps, il y a un troisième paragraphe de texte sous le bloc bleu.

Mais l'effet de FF n'est pas comme ça. Nous ne pouvons pas simplement effacer le calque suivant pour terminer notre travail, nous devons le "effacer" à temps avant que l'étiquette où se trouve l'élément flottant ne soit fermée.

Code du programme

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

Pour la balise

ajoutée, la hauteur d'IE et de FF changera. peut être résolu par la méthode suivante :

Code de programme

clear {
clear: both;
height:1px;
margin-top:-1px;
overflow:hidden;
}

Code de programme

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;height:1px;margin-top:-1px;overflow:hidden;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

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!