<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mise en page sur une seule colonne</title>
< ;style>
corps{
;
width : 90 % ;
/*height : 500px ; :5px auto /*C'est l'abréviation, le remplissage supérieur et inférieur est de 5 px, les éléments automatiques gauche et droit sont centrés ; est sur le centrage horizontal de la partie du bloc*/
}
.main .left{
width: 30%;
height: 500px;
background-color: pink;
float: left;/*Je veux flotter à gauche pour en haut, éloignez-vous du flux de documents et déplacez la ligne du bas vers le haut*/
}
.main .right{
width: 69%;
height: 500px;
background-color: deeppink;
float: right;/ *L'effet de droite et de gauche est le même. Après le flottement, un nouveau flux de documents est formé*/
}
.footer{
. 0 auto;
}
.clear{
clear : les deux;
}
</style>
</head>
<body>
<div class="header" ></div>
<div class="main">
<div class="left"></div>
<div class="right"></div> clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
Pourquoi utiliser .main .left
lors de la définition du style .left dans le style et utilisez .clear directement lors de la définition du style .clear
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
L'utilisation de .main .left a une priorité plus élevée. Cela vous indique clairement que ce style est laissé sous la classe principale. Cela limite la portée et permet au navigateur de trouver l'objet qu'il souhaite restituer avec plus de précision.
C'est un nom, il n'y a pas certaines exigences. Vous pouvez le nommer comme vous voulez