css quand effacer le flotteur

En CSS, lorsque nous faisons flotter un élément, nous devons effacer le flotteur, car lorsque l'élément flotte, l'élément se détache du flux de documents et en CSS, n'importe quel élément peut flotter, et le l'élément flottant générera une boîte au niveau du bloc, quel que soit l'élément dont il s'agit.

Recommandé : "Tutoriel de base CSS》

Effacer les flotteurs. Quand devez-vous effacer les flotteurs ?
1. Quand les flotteurs doivent-ils être dégagés ?

Lorsque nous faisons flotter un élément, notre élément se détache du flux du document et flotte sur le document comme un bateau.

En CSS, n'importe quel élément peut être flottant. Un élément flottant crée une boîte au niveau du bloc, quel que soit le type d'élément dont il s'agit.
Le flotteur est principalement populaire dans la mise en page. Si le flotteur n'est pas effacé après utilisation, il y aura des problèmes sans fin.

Capture d'écran de Zhihu :

Analyse de la structure du code HTML :

<p class="outer">
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
</p>

Analyse du style de code CSS :

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}.p1{width: 80px;height: 80px;background: red;float: left;}.p2{width: 80px;height: 80px;background: blue;float: left;}.p3{width: 80px;height: 80px;background: sienna;float: left;}

Ici, je n'ai pas réglé la hauteur du p.outer le plus à l'extérieur, mais nous savons que si les éléments à l'intérieur ne flottent pas, alors la hauteur de celui-ci couche externe Il sera ouvert automatiquement. Mais lorsque l'élément intérieur flotte, influence apparaît :

1. La marge de la boîte parent est affectée et ne peut pas être centrée à gauche et à droite
2. Je l'ai fait. not give La hauteur de la boîte parent est définie.Après le flottement, la hauteur de la boîte parent n'est pas agrandie.La hauteur étendue dans l'image est l'effet apporté par le remplissage.

Quelles sont les méthodes pour effacer les flotteurs ?
Clear a également 4 valeurs possibles. Le plus couramment utilisé est les deux, ce qui supprime le flottement à gauche et à droite. la gauche et la droite ne peuvent dégager les flotteurs que dans une seule direction. none est la valeur par défaut.

Méthode 1 : Ajouter de nouveaux éléments et appliquer clear: Both
HTML :

<p class="outer">
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="clear"></p>
</p>

CSS :

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

Effet :

C'est-à-dire :

[Supplémentaire] :
Utiliser vide L'étiquette efface le flottant

Méthode 2 : Le parent p définit overflow: auto (remarque : c'est le parent p, qui est le p ici .outer)

HTML :

<p class="outer over-flow"> //这里添加了一个class    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
    <!--<p class="clear"></p>--></p>

CSS :

.over-flow{    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}

Le rendu est le même que ci-dessus.

Principe : Utilisez l'attribut overflow pour effacer les flottants. Une chose à noter est que l'attribut overflow a trois valeurs d'attribut : caché, auto et visible. Nous pouvons utiliser des valeurs cachées et automatiques pour effacer les flotteurs, mais n'oubliez pas de ne pas utiliser de valeurs visibles. Si cette valeur est utilisée, l'effet de suppression des flotteurs ne sera pas obtenu.

[Supplémentaire] :
Utilisez l'attribut overflow
Cette méthode résout efficacement l'inconvénient de devoir ajouter du code involontaire en effaçant les flottants à travers les éléments d'étiquette vides. Pour utiliser cette méthode, il vous suffit de définir la propriété CSS : overflow:auto dans l'élément qui doit être débarrassé de float. overflow:auto; rend la hauteur adaptative. zoom:1; est pour la compatibilité avec IE6. Vous pouvez également utiliser height:1%; Notez que le zoom n'est pas conforme aux normes W3C. overflow:hidden peut également être implémenté. overflow:hidden peut également être implémenté.

方法三： 据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲）
先说原理：它就是利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个p.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于p.clear的效果。下面来看看其具体的使用方法：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/.outer:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

其中clear:both;指清除所有浮动；content: ‘.’; display:block;对于FF/chrome/opera/IE8不能缺少，
其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。
即：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} .clearfix:after {content:'';display:block;clear:both;visibility:hidden;zoom:1;}

 <p class="outer clearfix">

【补充】：

使用after伪对象清除浮动

after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。

a、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

b、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”

再次again：当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！

浮动的特点:
1.浮动的元素，讲向左或者向右浮动，浮动到包围元素的边上，或者上一个浮动元素的边上为止。

2.浮动的元素，不再占用空间，且浮动元素的层级要高于普通元素。

3.浮动的元素，一定是块元素，不管之前是什么元素。

4.如果浮动的元素没有指定宽度的话，浮动后会尽可能变窄，因此浮动元素要指定宽和高。

5.一行的多个元素，要浮动大家一起浮动。

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!