Les exemples présentent six façons d'effacer le HTML flottant pour référence.-tutoriel HTML-php.cn

Les exemples présentent six façons d'effacer le HTML flottant pour référence.

伊谢尔伦

Libérer： 2017-07-20 09:58:30

original

1503 Les gens l'ont consulté

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>

Copier après la connexion

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>

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, solution: font-size:0; overflow:hidden;

<!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

4. Ajoutez
<🎜 sous 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

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>

Copier après la connexion

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>

Copier après la connexion

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!