Plusieurs méthodes pour effacer les flottants en HTML-tutoriel HTML-php.cn

Plusieurs méthodes pour effacer les flottants en HTML

不言

Libérer： 2018-06-25 09:30:22

original

2129 Les gens l'ont consulté

Cet article parle de 6 façons d'effacer les éléments HTML flottants pour votre référence. Veuillez voir ci-dessous pour plus de détails

Que se passera-t-il lors de l'utilisation de display: inline-block :

1. Faire en sorte que les éléments de bloc s'affichent sur une seule ligne

2. Faire en sorte que la largeur et la hauteur du support en ligne soient analysées

4. la largeur est Le contenu est étiré

5. Les balises Block sont prises en charge dans IE6 et 7.

Puisque l'attribut inline-block est analysé lors de l'habillage (il y a un espace), la solution est de utilisez float float:left/right

Situations qui se produisent lors de l'utilisation de flotteurs :

1. Faire en sorte que les éléments de bloc s'affichent sur une seule ligne

2. Faire en sorte que les éléments en ligne prennent en charge la largeur et la hauteur

. 3. Ne définissez pas la largeur et la hauteur Lorsque la largeur est étirée par le contenu
4. Les sauts de ligne ne sont pas analysés (donc lorsque vous utilisez des éléments en ligne, vous pouvez utiliser des flotteurs pour effacer les espaces)
5. se détachera du flux de documents et se déplacera dans une direction spécifiée, jusqu'à ce qu'il atteigne la limite du parent ou qu'un autre élément flottant s'arrête (le flux de documents est la position occupée par les objets affichables dans le document lorsqu'ils sont disposés)

Le code suivant ne fait flotter que box1, puis box1 et box2 se chevauchent. Si les deux sont flottants, il n'y aura pas de chevauchement

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p,span{height:100px;background:red;border:1px solid #000; float:left;}
/*
inline-block
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置宽度的时候宽度由内容撑开
5.在IE6,7下不支持块标签
浮动:
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
*/
</style>
</head>
<body>
<p class="p1">p1</p>
<p class="p2">p2</p>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>

Copier après la connexion

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}
</style>
</head>
<body>
<p class="box1"></p>
<p class="box2"></p>
</body>
</html>

Copier après la connexion

Méthode pour effacer le flottant :

1 Ajouter un flottant au parent (dans ce cas, lorsque le parent. margin: 0 auto ; non centré)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动(不居中了)
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
</p>
</body>
</html>

Copier après la connexion

2. Ajoutez display:inline-block; au parent (identique à la méthode 1, non centré. Seuls IE6 et 7 sont centrés)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
</p>
</body>
</html>

Copier après la connexion

3. Ajoutez

.clear{ height:0px;font-size : 0;clear:both;}Mais sous IE6, l'élément block a une hauteur minimale, c'est-à-dire que lorsque height<19px, la valeur par défaut est 19px. La solution : font-size:0;

4. Ajoutez

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
.clear{ height:0px;font-size:0;clear:both;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<p class="clear"></p>
    .clear{ height:0px;font-size:0;clear:both;}
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
        <p class="clear"></p>
</p>
</body>
</html>

Copier après la connexion

sous l'élément flottant. au parent de l'élément flottant }

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<p class="clear"></p>
    .clear{ height:0px;font-size:0;clear:both;}
    4.在浮动元素下加<br clear="all"/>
*/
</style>
</head>
<body>
<p class="box">
    <p class="p"></p>
    <br clear="all"/>
</p>
</body>
</html>

Copier après la connexion

:after{content:""; display:block;clear:both;}

Copier après la connexion

6. Ajoutez overflow:auto au parent de l'élément flottant;

无标题文档

Copier après la connexion

Ce qui précède est le contenu de cet article. Tout le contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;border:1px solid #000;overflow:auto;}
.p1{ width:260px;height:400px;background:Red;float:left;}
</style>
</head>
<body>
<p class="box">
    <p class="p1"></p>
</p>
</body>
</html>

Copier après la connexion

Recommandations associées :

Comment utiliser HTML pour bloquer le menu contextuel et la fonction de balayage du clic gauche

À propos du code de formatage du texte HTML

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!