Quatre paramètres flottants : gauche, droite, aucun, hériter de l'héritage
Réaliser un habillage du texte, une disposition horizontale et résoudre le repli de l'élément parent.
Comment utiliser clear float pour résoudre le problème de repli
Utiliser float: gauche; réaliser la disposition horizontale des éléments de niveau bloc
<style>
*{
padding: 0;
margin: o;
}
.test{
width:100px;
height: 100px;
background:red ;
float: left;
margin-right: 10px;
}
</style>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
Float pour obtenir un effet d'habillage de texte:
utilisez float: gauche ou droite
Pourquoi peut flotter autour de l'image?
En fait, avec float deviendra un élément de bloc, seraÉcart par rapport au flux normal de documentsOrganisez la mise en page. maisOccupent toujoursEspace pour le flux de texte normal.
Le texte s'affiche normalement une fois l'image affichée.
Mécanisme de positionnement en CSS
Flux standard, positionnement, flottant
<style>
*{
padding: 0;
margin: o;
}
.per{
width:500px;
height: auto;
border:1px solid #000 ;
}
.test{
width:100px;
height: 100px;
background:red ;
float: left;
}
.bro{
width:100px;
height: 100px;
background:blue ;
}
</style>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="bro"></div>
</div>
</body>
À ce stade, on constate que la hauteur a disparu et que le flottement le fait sortir du flux de documents, ce qui est l'un des effets secondaires.
bro ne flotte pas. Il doit apparaître sous l'élément parent, mais il apparaît sous test. Il s'agit du deuxième effet secondaire causé par le flottement.
给父元素加高度,但这方法不适用，当给子元素加数量时又会撑开。
.per{
width:500px;
height: 10px;
border:1px solid #000 ;
}
2.用clear属性
clear：none，left，right，both
3.给父元素加overflow和zoom
.per{
width:500px;
height: 10px;
border:1px solid #000 ;
overflow:hidden; /*解决溢出问题的*/
zoom:1; /*IE专属的*/
}
使用这两个可以很好的兼容浏览器
4.给父元素也加float元素
但有个缺点：父类的兄弟元素则也陷入了
还要给父类的兄弟元素加clear:both;
L'utilisation de la compensation flottante de pseudo-classe before :: peut être mieux réalisée à l'avenir
application
<style>
*{
padding:0;
margin: 0;
}
.head{
width:100%;
height: 64p×;
}
.logo{
width:160px;
height: 40p×;
float:left;
}
.nav{
width:320px;
height: 64p×;
float:left;
}
.nav-li{
width: 80px;
height:64px;
text-align: center;
line-height: 64px;
color:#333;
float:left;
}
.icons{
width:320px;
height:64px;
float:right;
}
.i01{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i02{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i03{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i04{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i05{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
</style>
<body>
<div class="head">
<div class="logo">
<img src="logo.png" width="160" height="40" alt="">
</div>
<div class="nav">
<div class="nav-li">实战</div>
<div class="nav-li">路径</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
<div class="icons">
<div class="i01"></div>
<div class="i01"></div>
<div class="i03"></div>
<div class="i04"></div>
<div class="i05"></div>
</div>
</div>
</body>
SUIVANT:
positionnement CSS. Fixez l'élément à n'importe quelle position sur la page.