Explication détaillée de l'attribut Float en CSS

Cette fois, je vais vous apporter une explication détaillée de l'attribut Float en CSS. Quelles sont les précautions lors de l'utilisation de l'attribut Float en CSS Voici un cas pratique, jetons un coup d'œil.

1. Fonctionnalités de Float

1. Appliquer du texte autour des images

2. 🎜>

3. Multi-colonnes

Disposition flottante

4. La largeur et la hauteur des éléments flottants sont adaptatives, mais leurs valeurs peuvent être définies.

2. Problème principal résolu

Texte entourant l'image :

balise img placée avec plusieurs balises de texte Dans le conteneur , si l'image flotte, l'étiquette de texte entourera l'image.

<img src="../img/a.jpg" style=" width: 100px; height: 200px; float: left;" alt="">
        <p>001文件内容文件内容文内容文件内容<br/>
        文件内容文件内容文件内容文件内容文件内内容文件内容<br/>
        文件内容文件内容文件内容文件内容文件内容<br/> 
        文件内容文件内容文件内容文件内容文内容文件内容文件内容<br/>
        <p>p标签文件内容文件内容文件内容文件内容文件内容文容文件内容文件内容文件内容</p>
        <p>p标签文件内容文件内容文件内容文件内容文件内容文件内容</p>
        文件内容文件内容文件内容文件件内容文件内容文件内容<br/>
        文件内容文件内容文件内容文件内容文件内容文件内容文件内容文件内容<br/> 
        文件内容文件内容文件内容文件内容文件内容文件内内容文件内容<br/>
        文件内容文件内容文件内容文件容文件内容文件内容<br/>
        文件内容文件内容文件内容文件容文件内容文件内容<br/>
        </p>

2.1 C'est un problème

Les éléments flottants sont adjacents aux éléments normaux, et les éléments flottants sont adjacents aux éléments normaux S'il n'y a pas de

pour effacer le flottant, alors l'élément normal sera couvert par l'élément flottant, mais le contenu contenu sera affiché autour de l'élément flottant.

<p style="width: 100px; height: 200px; background: red;float: left;" >001</p> 
<p style="width: 100px; height: 200px; background: gray;float: none;" ><p>002</p></p>

001 flotte, 002 ne flotte pas, mais l'élément 002 lui-même est couvert par 001, mais le contenu est affiché autour de 001.

3. Domaines d'application non essentiels et principaux

Disposition des colonnes : laissez les blocs être horizontaux. Organisez d'abord, puis commencez une nouvelle ligne avec la partie excédentaire.

Caractéristiques principales

1. Effondrement de la hauteur des parents (c'est aussi un problème sérieux)

.wrap{
           background:red; 
           padding:10px;
           width:auto;
        }
        .left{
            background:gray;
            width:200px;
            height:100px;
            float:left;
        }
        .right{
            background:yellow;
            width:100px;
            height:100px;
            float:left;
        }

<p class="wrap">
        <p class="left">left</p>
        <p class="right">right</p>
</p>

2. La largeur et la hauteur deviennent des sous-éléments adaptatifs, mais les paramètres de largeur et de hauteur sont valides

.wrap{
           background:red; 
           padding:10px;
           float:left;
        } 
        .left{
            width:100px;
            background:gray;
        }
        .right:{
            width:200px;
            background:yellow;
        }

<p class="wrap">
        <p class="left">left</p>
        <p class="right">right</p>
</p>

2. Résoudre le problème de l'effondrement en hauteur

Tout d'abord, nous devons comprendre les deux concepts de base de BFC et IFC, car ils sont étroitement liés au rendu du navigateur.

1.BFC (contexte de formatage au niveau du bloc)

Il s'agit d'une zone rendue indépendamment, stipulant comment la zone est disposée en interne et n'a rien à voir avec l'extérieur. sont les suivantes :

1.1 Les cases internes seront placées verticalement les unes après les autres

1.2 La distance verticale de la Box est déterminée par la marge, et les marges de deux cases adjacentes appartenant à la le même BFC se chevauchera

1.3 La zone BFC ne se chevauchera pas avec float

.head{
            background:pink;
            margin: 20px 0px;
            height:100px;
        }
        .wrap{
           background:red; 
           padding:10px;
           margin:20px 0px;
           overflow:hidden;
        } 
        .left{
            width:100px;
            background:gray; 
            margin:10px 0px;
        }
        .right:{
            width:200px;
            background:yellow;  
            margin:20px 0px;
        }

<p class="head">head</p>
    <p class="wrap">
        <p class="left">left</p>
        <p class="right">right</p>
    </p>

Il y a une marge de 20 pixels entre le haut et le bas boîtes de .head et .wrap , mais un chevauchement se produit ; entre

.head et .left, .head a une marge de 20 px et .left a une marge de 10 px. Il n'y a pas de chevauchement car .wrap crée un BFC. (débordement : caché).

1.4 La marge gauche de chaque case est en contact avec le côté gauche de la bordure (le même que le côté droit), et il en va de même pour les flotteurs

2. contexte de formatage au niveau de la ligne)

Les cases sont placées horizontalement les unes après les autres en partant du haut du bloc conteneur. L'espace occupé par les marges horizontales, les bordures et le remplissage sont tous réunis (l'affichage est en ligne, en bloc en ligne ; les éléments avec des caractéristiques en ligne ont les caractéristiques suivantes). Les règles sont les suivantes :

2.1 La largeur et la hauteur ne peuvent pas être spécifiées

2.2 La marge, le remplissage et la bordure ne sont pas valides dans le sens vertical

2.3 Le côté gauche de la zone de ligne est proche du côté gauche du bloc conteneur, et la ligne Le côté droit d'une boîte affleure le côté droit de sa boîte conteneur, et un flotteur peut être inséré entre le bord du bloc conteneur et la ligne boîte.

2.4 La hauteur de la boîte en ligne est déterminée par

line-height.

Pour des exemples dans cette section, veuillez vous référer à l'élément en ligne dans le chapitre sur l'affichage.

3.Solution

主要根据BFC的原理实现，因为BFC的渲染的是整块区域，也就会计算出宽、高。这也是传说中的清除浮动的方案

3.1 父容器创建BFC方法

3.1.1 创建BFC的方法

a) Float除了none以外的取值；

b) Overflow除了visible以外的值；

c) Display值为table-cell、table-caption、inline-block、flex、inline-flex等

d) Position值为absloute、fixed

e) Fieldset元素

3.1.2 清除浮动

a) Float、overflow、display三种方式都可以清除浮动，但position、fieldset虽然创建了bfc但不可以清除浮动（也就是不能解决高度塌陷的问题）。主要原因为：position、fieldset都需要子元素来撑开父容器的高度，但子元素浮动后又不存在高度，所以失效。

b) Float、overflow、display示例代码:

.wrap{
            background: gray;
            padding: 10px;
            overflow: auto;
        }
        .left, .right{
            background: red;
            float: left;
            width: 200px;
            height: 100px;
        }
        .right{
            background: yellow;
        }
        .footer{
            background: pink;
        }

<p class="wrap" >
        <p class="left">left</p>
        <p class="right">right</p>
    </p>
<p class="footer">footer</p>

3.1.3 最后一个子元素clear:both

利用clear:both触发父容器重新计算高度的原理实现，示例代码如下：

.wrap{
            background: gray;
            padding: 10px; 
        }
        .left, .right{
            background: red;
            float: left;
            width: 200px;
            height: 100px;
        }
        .right{
            background: yellow;
        }
        .footer{
            background: pink;
        }
        .clear{
            clear: both;
            zoom: 1;
        }

<p class="wrap" >
        <p class="left">left</p>
        <p class="right">right</p>
        <p class="clear"></p>
    </p>
<p class="footer">footer</p>

3.1.4 After添加最后一个子元素

利用css的:after伪元素实现，动态插入元素并清除浮动：

.wrap{
            background: gray;
            padding: 10px; 
        }
        .wrap:after{
            content: '';
            display: block;
            overflow: hidden;
            clear: both;
        }
        .left, .right{
            background: red;
            float: left;
            width: 200px;
            height: 100px;
        }
        .right{
            background: yellow;
        }
        .footer{
            background: pink;
        }

<p class="wrap" >
        <p class="left">left</p>
        <p class="right">right</p> 
    </p>
<p class="footer">footer</p>

4. 总结

1. 利用bfc方式清除浮动，简单、浏览器支持良好，但在IE6-版本支持存在问题。但是存在以下局限性，要适环境而用：

    a) Overflow方式：滚动条会被隐藏，如果子内容超高则存在显示不全的问题；

    b) Float方式：让父容器浮动，那么就存在对父容器同辈元素的影响；

    c) Dipslay方式：让父容器变为table或者flex等，都存在不明确的影响，大家都不推荐使用。

2. 最佳解决方案：利用:after添加一个伪元素并给予clear:both和zoom:1来实现清除浮动，兼容性好，对环境影响最小。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS实现3D按钮效果

opacity透明度滤镜的IE兼容解决方法

水平垂直居中的方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!