Comment effacer le flotteur en CSS

La façon d'effacer float en CSS est de définir [overflow:auto] pour l'élément parent. Une fois défini, l'élément de contenu sera coupé et les éléments restants ne seront pas visibles. Nous pouvons également effacer float en ajoutant une balise vide ou en utilisant le pseudo-élément [:after] .

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Parlons d'abord du but de l'effacement des flotteurs. L'effacement des flotteurs n'est pas l'effet de l'effacement de ses propres flotteurs, mais l'effet de l'effacement des flotteurs des éléments flottants qu'il touche afin que les éléments derrière les flotteurs soient effacés. les éléments flottants ne les accepteront pas. Leurs flotteurs sont disposés selon le flux normal des éléments.

Nous allons maintenant vous présenter trois façons d'effacer les flottants :

La première façon :

Ajouter une balise vide (div ou br, etc. fera l'affaire) ), éliminez l'impact de float sur les éléments suivants grâce à l'instruction clear: Both.

<div class="main_left">.main{float:left;}</div>
<div class="side_left">.side{float:right;}</div>
<!--增加一个空标签-->
<div style="clear:both;"></div>
<div class="footer">.footer</div>

Inconvénients : Nécessité d'ajouter beaucoup de balises dénuées de sens, ce qui n'est pas bon pour une maintenance ultérieure. S'il s'agit d'un petit programme, ce n'est pas grave, mais s'il s'agit d'un gros projet, utilisez-le avec prudence.

La deuxième façon : utiliser le pseudo-élément :after

.clearIt { zoom:1; }
.clearIt:before;  
 /*加上before可以防止浏览器顶部的空白崩溃（就是上一个div的margin-bottom和下边的margin-top会发生叠加）*/
 .clearIt:after {
    content:".";
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; 
}
/*
display:block 使生成的元素以块级元素显示,占满剩余空间;
height:0 避免生成内容破坏原有布局的高度。
visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
zoom：1 触发IE hasLayout。
*/

La troisième façon :

Définir le débordement sur l'élément parent : auto

<!--为父元素设置overflow-->
<div class="wrap"  style="overflow:auto;">
<div class="wrap_main_left">.main{float:left;}</div>
<div class="wrap_side_left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

quand le parent Une fois qu'un élément est défini avec overflow:auto, l'élément de contenu sera coupé et ne sera pas visible au-delà de l'élément.

L'avantage de cette méthode est qu'il n'y a pas de problèmes structurels et sémantiques et que la quantité de code est très faible. Mais les inconvénients sont également très graves. Lorsque le contenu augmente, il est facile de masquer le contenu car il ne s'enroule pas automatiquement et les éléments qui doivent déborder ne peuvent pas être affichés.

En fait, c'est clair : les deux sont utilisés pour éliminer l'influence du flotteur. Plusieurs autres méthodes atteignent leurs propres objectifs en masquant le contenu.

Partage de vidéos d'apprentissage associées : tutoriel vidéo CSS

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!