CSS Flottant (flottant)

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>

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

CSS Flottant (flottant)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]