Maison > Article > interface Web > Explication détaillée de l'attribut Float en CSS
Explication détaillée de l'attribut Float en CSS
- php中世界最好的语言original
- 2018-03-22 15:15:002428parcourir
Cette fois, je vais vous apporter une explication détaillée de l'attribut Float en CSS. Quelles sont les précautions lors de l'utilisation de l'attribut Float en CSS Voici un cas pratique, jetons un coup d'œil.
1. Fonctionnalités de Float
1. Appliquer du texte autour des images
2. 🎜>
3. Multi-colonnes4. La largeur et la hauteur des éléments flottants sont adaptatives, mais leurs valeurs peuvent être définies.2. Problème principal résolu
Texte entourant l'image :<img src="../img/a.jpg" style=" width: 100px; height: 200px; float: left;" alt=""> <p>001文件内容文件内容文内容文件内容<br/> 文件内容文件内容文件内容文件内容文件内内容文件内容<br/> 文件内容文件内容文件内容文件内容文件内容<br/> 文件内容文件内容文件内容文件内容文内容文件内容文件内容<br/> <p>p标签文件内容文件内容文件内容文件内容文件内容文容文件内容文件内容文件内容</p> <p>p标签文件内容文件内容文件内容文件内容文件内容文件内容</p> 文件内容文件内容文件内容文件件内容文件内容文件内容<br/> 文件内容文件内容文件内容文件内容文件内容文件内容文件内容文件内容<br/> 文件内容文件内容文件内容文件内容文件内容文件内内容文件内容<br/> 文件内容文件内容文件内容文件容文件内容文件内容<br/> 文件内容文件内容文件内容文件容文件内容文件内容<br/> </p>
2.1 C'est un problème
Les éléments flottants sont adjacents aux éléments normaux, et les éléments flottants sont adjacents aux éléments normaux S'il n'y a pas depour effacer le flottant, alors l'élément normal sera couvert par l'élément flottant, mais le contenu contenu sera affiché autour de l'élément flottant.
<p style="width: 100px; height: 200px; background: red;float: left;" >001</p> <p style="width: 100px; height: 200px; background: gray;float: none;" ><p>002</p></p>001 flotte, 002 ne flotte pas, mais l'élément 002 lui-même est couvert par 001, mais le contenu est affiché autour de 001.
3. Domaines d'application non essentiels et principaux
Disposition des colonnes : laissez les blocs être horizontaux. Organisez d'abord, puis commencez une nouvelle ligne avec la partie excédentaire. Caractéristiques principales1. Effondrement de la hauteur des parents (c'est aussi un problème sérieux).wrap{
background:red;
padding:10px;
width:auto;
}
.left{
background:gray;
width:200px;
height:100px;
float:left;
}
.right{
background:yellow;
width:100px;
height:100px;
float:left;
}
<p class="wrap"> <p class="left">left</p> <p class="right">right</p> </p>
.wrap{
background:red;
padding:10px;
float:left;
}
.left{
width:100px;
background:gray;
}
.right:{
width:200px;
background:yellow;
}
<p class="wrap"> <p class="left">left</p> <p class="right">right</p> </p>
2. Résoudre le problème de l'effondrement en hauteur
Tout d'abord, nous devons comprendre les deux concepts de base de BFC et IFC, car ils sont étroitement liés au rendu du navigateur. 1.BFC (contexte de formatage au niveau du bloc) Il s'agit d'une zone rendue indépendamment, stipulant comment la zone est disposée en interne et n'a rien à voir avec l'extérieur. sont les suivantes :1.1 Les cases internes seront placées verticalement les unes après les autres1.2 La distance verticale de la Box est déterminée par la marge, et les marges de deux cases adjacentes appartenant à la le même BFC se chevauchera
1.3 La zone BFC ne se chevauchera pas avec float
.head{
background:pink;
margin: 20px 0px;
height:100px;
}
.wrap{
background:red;
padding:10px;
margin:20px 0px;
overflow:hidden;
}
.left{
width:100px;
background:gray;
margin:10px 0px;
}
.right:{
width:200px;
background:yellow;
margin:20px 0px;
}
<p class="head">head</p> <p class="wrap"> <p class="left">left</p> <p class="right">right</p> </p>
line-height.
Pour des exemples dans cette section, veuillez vous référer à l'élément en ligne dans le chapitre sur l'affichage.3.Solution
主要根据BFC的原理实现，因为BFC的渲染的是整块区域，也就会计算出宽、高。这也是传说中的清除浮动的方案
3.1 父容器创建BFC方法
3.1.1 创建BFC的方法
a) Float除了none以外的取值；
b) Overflow除了visible以外的值；
c) Display值为table-cell、table-caption、inline-block、flex、inline-flex等
d) Position值为absloute、fixed
e) Fieldset元素
3.1.2 清除浮动
a) Float、overflow、display三种方式都可以清除浮动，但position、fieldset虽然创建了bfc但不可以清除浮动（也就是不能解决高度塌陷的问题）。主要原因为：position、fieldset都需要子元素来撑开父容器的高度，但子元素浮动后又不存在高度，所以失效。
b) Float、overflow、display示例代码:
.wrap{
background: gray;
padding: 10px;
overflow: auto;
}
.left, .right{
background: red;
float: left;
width: 200px;
height: 100px;
}
.right{
background: yellow;
}
.footer{
background: pink;
}
<p class="wrap" > <p class="left">left</p> <p class="right">right</p> </p> <p class="footer">footer</p>
3.1.3 最后一个子元素clear:both
利用clear:both触发父容器重新计算高度的原理实现，示例代码如下：
.wrap{
background: gray;
padding: 10px;
}
.left, .right{
background: red;
float: left;
width: 200px;
height: 100px;
}
.right{
background: yellow;
}
.footer{
background: pink;
}
.clear{
clear: both;
zoom: 1;
}
<p class="wrap" > <p class="left">left</p> <p class="right">right</p> <p class="clear"></p> </p> <p class="footer">footer</p>
3.1.4 After添加最后一个子元素
利用css的:after伪元素实现，动态插入元素并清除浮动：
.wrap{
background: gray;
padding: 10px;
}
.wrap:after{
content: '';
display: block;
overflow: hidden;
clear: both;
}
.left, .right{
background: red;
float: left;
width: 200px;
height: 100px;
}
.right{
background: yellow;
}
.footer{
background: pink;
}
<p class="wrap" > <p class="left">left</p> <p class="right">right</p> </p> <p class="footer">footer</p>
4. 总结
1. 利用bfc方式清除浮动，简单、浏览器支持良好，但在IE6-版本支持存在问题。但是存在以下局限性，要适环境而用：
a) Overflow方式：滚动条会被隐藏，如果子内容超高则存在显示不全的问题；
b) Float方式：让父容器浮动，那么就存在对父容器同辈元素的影响；
c) Dipslay方式：让父容器变为table或者flex等，都存在不明确的影响，大家都不推荐使用。
2. 最佳解决方案：利用:after添加一个伪元素并给予clear:both和zoom:1来实现清除浮动，兼容性好，对环境影响最小。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
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!
Articles Liés
Voir plus- Comment convertir une liste non ordonnée en un menu déroulant stylisé à l’aide de jQuery ?
- Système de gestion des ordonnances médicales basé sur le Web
- Quel est l'impact de la hauteur de ligne sur la hauteur des éléments de bloc et en ligne ?
- Pourquoi les ensembles de champs refusent-ils de se réduire dans Firefox ?
- Comment puis-je masquer des éléments sans laisser d’espace vide sur la page ?