CSS Float
Qu'est-ce que CSS Float ?
CSS Float déplacera l'élément vers la gauche ou la droite, et les éléments environnants seront également réorganisés.
Float est souvent utilisé pour les images, mais il est également très utile en mise en page.
Comment les éléments flottent
L'élément flotte horizontalement, ce qui signifie que l'élément ne peut se déplacer que vers la gauche et la droite, mais pas de haut en bas.
Un élément flottant se déplacera aussi loin que possible vers la gauche ou la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante.
Les éléments après l'élément flottant l'entoureront.
Les éléments situés avant l'élément flottant ne seront pas affectés.
Attribut flottant CSS float
Cet article présente principalement l'attribut float : définissant la direction dans laquelle l'élément flotte.
1. Méthode de mise en page : présentation du flux de documents, du calque flottant et de l'attribut float.
2. float:left : Présentation de la méthode de mise en page lorsque float est laissé.
3. float:right : Présentation de la méthode de mise en page lorsque float est correct.
4. Les éléments adjacents contiennent des attributs float : introduction de la méthode de mise en page lorsque les éléments adjacents contiennent des attributs float.
1. Méthode de mise en page
Méthode de mise en page, comprend principalement : le flux de documents, le calque flottant, l'attribut float.
1.1 Flux de documents
Le flux de documents standard (mise en page par défaut) des pages HTML est : de haut en bas, de gauche à droite, avec des sauts de ligne en cas de rencontre de blocs (éléments au niveau du bloc) .
1.2 Couche flottante
Couche flottante : Après avoir attribué une valeur à l'attribut float de l'élément, il est séparé du flux de documents et flotte à gauche et à droite, près des bordures gauche et droite de l'élément parent (la zone par défaut est la zone de texte du corps) .
L'élément flottant est rempli par les éléments suivants (non flottants) dans la position libérée du flux de documents : les éléments au niveau du bloc sont remplis directement s'ils chevauchent la plage de l'élément flottant, le flottant. element couvre l’élément au niveau du bloc. Éléments en ligne : insérez-les s'il y a de l'espace.
1.3 Introduction à l'attribut float
① left : L'élément flotte vers la gauche.
② droite : L'élément flotte vers la droite.
③ aucun : Valeur par défaut.
④ hériter : hérite de l'attribut float de l'élément parent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.3-float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>
section suivante