Maison > Article > interface Web > Plusieurs méthodes pour effacer les flottants en HTML
Plusieurs méthodes pour effacer les flottants en HTML
- 不言original
- 2018-06-25 09:30:222069parcourir
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)
<!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><!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> 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> 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>3. Ajoutez 5394d62b37c0d1016baca90bf99fbfbf94b3e26ee717c64999d7867364b1b4a3
.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
<!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>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>:after{content:""; display:block;clear:both;}6. Ajoutez overflow:auto au parent de l'élément flottant;无标题文档
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>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!