Lorsque vous utilisez des blocs HTML div et que le milieu des blocs ne peut pas être étroitement connecté, rien ne peut être fait.
1. Vous pouvez en ajouter un au milieu du contenu de <head></head>
* {
marge : 0 ;
remplissage : 0 ;
}
Rendre l'espacement entre tous les blocs nul n'entre pas en conflit avec la marge de remplissage ci-dessous.
2. Il y a un problème d'écart entre les divisions supérieures et inférieures
J'ai écrit 4 divs, répartis de haut en bas, avec un espacement entre eux. Le code et l'effet sont les suivants :
.div1{
hauteur : 100 px ;
couleur d'arrière-plan : bleu ;
position : relative ;
}
.div2 {
hauteur : 100 px ;
couleur d'arrière-plan : bleuviolet ;
position : relative ;
}
.div3{
hauteur : 100 px ;
couleur d'arrière-plan : rouge ;
position : relative ;
}
.div4{
hauteur : 100 px ;
couleur d'arrière-plan : jaune ;
position : relative ;
}
<corps>
<div class="div1" ></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</corps>
Ensuite, j'ai essayé d'ajouter margin:0 à chaque div pour supprimer l'espacement entre les divs. Le code est le suivant :
.div1{
hauteur : 100 px ;
couleur d'arrière-plan : bleu ;
position : relative ;
marge : 0 ;
}
.div2 {
hauteur : 100 px ;
couleur d'arrière-plan : bleuviolet ;
position : relative ;
marge : 0 ;
}
.div3{
hauteur : 100 px ;
couleur d'arrière-plan : rouge ;
position : relative ;
marge : 0 ;
}
.div4{
hauteur : 100 px ;
couleur d'arrière-plan : jaune ;
position : relative ;
marge : 0 ;
}
Le résultat reste inchangé, mais il existe encore des lacunes, comme le montre ci-dessous :
Ensuite, j'ai effectué une recherche sur Baidu et j'ai trouvé un moyen de définir la taille de la police, comme indiqué dans le code et l'effet suivants :
corps{font-size:0;}
.div1{
hauteur : 100 px ;
couleur d'arrière-plan : bleu ;
position : relative ;
}
.div2 {
hauteur : 100 px ;
couleur d'arrière-plan : bleuviolet ;
position : relative ;
}
.div3{
hauteur : 100 px ;
couleur d'arrière-plan : rouge ;
position : relative ;
}
.div4{
hauteur : 100 px ;
couleur d'arrière-plan : jaune ;
position : relative ;
}
Le code ci-dessus se concentre sur l'ajout de body{font-size:0;}, et l'effet est le suivant :
Vous pouvez voir que l'écart entre le haut et le bas du div a été éliminé. Cependant, il existe toujours un écart entre le haut et la gauche.
C'est ce que j'ai fait, en ajoutant body{margin:0px;}, le code est le suivant :
corps{marge:0px;}
corps{font-size:0;}
.div1{
hauteur : 100 px ;
couleur d'arrière-plan : bleu ;
position : relative ;
}
.div2 {
hauteur : 100 px ;
couleur d'arrière-plan : bleuviolet ;
position : relative ;
}
.div3{
hauteur : 100 px ;
couleur d'arrière-plan : rouge ;
position : relative ;
}
.div4{
hauteur : 100 px ;
couleur d'arrière-plan : jaune ;
position : relative ;
}
L'effet est le suivant :
Comme vous pouvez le constater, toutes les lacunes ont été éliminées.
Cependant, il y a toujours un problème, c'est-à-dire que la définition de font-size:0 entraînera la disparition de toutes les polices.
C'est ainsi que j'ai résolu ce problème : ajoutez un div à l'intérieur d'un div et réinitialisez la taille de la police du div interne, par exemple : font-size:30px;.
Solution parfaite !
3. DIV+CSS clear : les deux résolvent le problème de la création d'un espace au-dessus du div après le flottement.
Nous savons que parfois l'utilisation de css float produira du css float. À ce stade, nous devons nettoyer le float. Nous pouvons utiliser l'attribut clear style pour y parvenir.
Cependant, après avoir utilisé clear:both pour effacer les flotteurs, un espace blanc apparaît souvent au-dessus du div où clear:both est appliqué.
La solution est d'ajouter overflow:hidden; au div au-dessus de ce div.
<div class="a caché">
<div class="bms_2_1_1 fl">~Traverser l'océan pour te voir,</div>
<div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div>
</div>
<div class="b cle hid">Pékin</div>
Description du modèle :
.cle{clear:les deux;}
.hid{débordement:caché;}
.fl{ float:gauche;}
.fr{ float:right;}
C'est le moyen de résoudre l'écart div causé par clear:both de nos jours.
Pourquoi utiliser clear:both en div ? Principalement parce que le texte de div b ne peut pas être aligné à gauche même si text-align:left; est défini en CSS, donc clear:both est utilisé dans ce cas.
Quelques questions :
(1) Pourquoi le text-align:left du texte chinois en div n'est-il pas valide ?
(2) Pourquoi l'utilisation de clear:both peut-elle résoudre le problème lorsque text-align:left n'est pas valide ?
(3) Pourquoi l'utilisation de clear:both crée-t-elle des lacunes ?
(4) Pourquoi l'utilisation de overflow:hidden; dans le div de même niveau ci-dessus résout-elle le problème d'écart ci-dessous ?
Étudions les questions ci-dessus en détail lorsque nous en aurons l’occasion à l’avenir.
Résumer:
Lorsqu'un div utilise clear:both pour créer un espace, vous devez ajouter overflow:hidden; au div frère au-dessus pour éliminer l'espace.