Maison > Article > interface Web > Les exemples présentent six façons d'effacer le HTML flottant pour référence.
Les exemples présentent six façons d'effacer le HTML flottant pour référence.
- 伊谢尔伦original
- 2017-07-20 09:58:301504parcourir
Que se passe-t-il lorsque display: inline-block est utilisé :
1. Faites en sorte que l'élément de bloc s'affiche sur une seule ligne
2. Définissez la largeur et la hauteur du support en ligne3. Les sauts de ligne sont analysés
4. Lorsqu'ils ne sont pas définis, la largeur est étendue par le contenu
5. Les balises de bloc sont prises en charge dans IE6 et 7.
Puisque l'attribut inline-block est analysé (il est un espace) lorsque les sauts de ligne sont La solution est d'utiliser float:left/right
Que se passe-t-il lors de l'utilisation de float:
1 Faire en sorte que l'élément de bloc s'affiche sur une seule ligne
2. support width and height
3. Si elle n'est pas définie, cela ne fonctionnera pas. Lorsque la largeur et la hauteur sont élevées, la largeur est étirée par le contenu
4. éléments, vous pouvez utiliser des flottants pour combler les espaces)
5. L'ajout de flottants aux éléments s'éloignera du flux du document et suivra le déplacement spécifié dans une direction jusqu'à ce qu'il atteigne la limite du parent ou qu'un autre élément flottant s'arrête (le document flow est la position occupée par les objets affichables dans le document lorsqu'ils sont disposés)
Méthode pour effacer le flottant : 1. Ajoutez un flottant au parent
(dans ce cas, la marge parent. : 0 auto; ne sera pas 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- au bloc 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 492d709938a9278a6138e41e858dd0f4
.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>4. Ajoutez 079d205125cc08b5a6372726f48e58b9
<!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>5. Ajoutez {zoom:1;}:after{content:""; display:block;clear:both;} 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{margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
.clear{zoom:1;}
.clear:after{content:""; display:block;clear:both;}
/*
清浮动
1.给父级也加浮动
2.给父级加display:inline-block
3.在浮动元素下加<p class="clear"></p>
.clear{ height:0px;font-size:0;clear:both;}
4.在浮动元素下加<br clear="all"/>
5. 给浮动元素的父级加{zoom:1;}
:after{content:""; display:block;clear:both;}
**在IE6，7下浮动元素的父级有宽度就不用清浮动
haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高
display: inline-block
height: (任何值除了auto)
float: (left 或 right)
width: (任何值除了auto)
zoom: (除 normal 外任意值)
*/
</style>
</head>
<body>
<p class="box clear">
<p class="p"></p>
</p>
</body>
</html>6 . Ajoutez overflow:auto 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;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>.
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!