En ce qui concerne la mise en page, la mise en page Flex et la mise en page Float sont deux méthodes différentes, utilisées pour répondre à différents besoins de mise en page. Ci-dessous, je vais vous montrer comment utiliser ces deux méthodes pour compléter la mise en page.
1. Utilisez la mise en page Flex :
La mise en page flexible est une méthode de mise en page puissante particulièrement adaptée à la création de mises en page réactives et flexibles. Voici un exemple simple qui montre comment utiliser la mise en page Flex pour créer du contenu de page centré horizontalement :
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 让容器占据整个视口高度 */
}
</style>
</head>
<body>
<div class="container">
<p>This is centered using Flexbox.</p>
</div>
</body>
</html>
2. Utilisez la disposition Float :
La disposition flottante a été utilisée dans le passé pour créer des dispositions complexes à plusieurs colonnes, mais elle n'est pas aussi puissante et flexible que la disposition Flex. Voici un exemple d'utilisation de la disposition Float pour créer une disposition à deux colonnes :
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
}
.column {
float: left;
width: 50%;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<p>This is column 1.</p>
</div>
<div class="column">
<p>This is column 2.</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Nous avons créé deux colonnes d'une largeur de 50 %, float: left;obtenues en utilisant. Enfin, nous avons ajouté un élément clair pour garantir que la hauteur du conteneur s'adapte au contenu.
La mise en page Flex est généralement plus adaptée aux mises en page Web modernes que la mise en page Float, car elle offre plus de contrôle et une meilleure prise en charge de la réactivité. Mais dans certains cas, la mise en page Float peut toujours être utile, surtout si vous devez prendre en charge les anciens navigateurs. Il est recommandé d'utiliser la mise en page Flex ou la mise en page CSS Grid dans les nouveaux projets pour obtenir une mise en page plus flexible et moderne.