Résolvez le problème du flottement. Ceux qui travaillent sur le front-end devraient le connaître. Voici 4 méthodes pour votre référence
. 1. Effacer les flotteurs en utilisant clear:both 🎜>Exemple1 : Utilisez p
code html |
css code |
| |
.box{ width:300px;margin:0 auto;border:10px solide #000;} .p{ width:200px;height:200px;background:red;float:left;} . clear{ height:0px;font-size:0;clear:both;overflow : caché;} |
Exemple2 :Utiliser
|
| .box{ width:300px;margin:0 auto;border:10px solid #000;} .p{ width:200px;height:200px;background:red;float:left;} |
示例3 :伪类对象::after+zoom:1(推荐使用) | |
< ;/p>
|
.box{margin:0 auto;border:10px solide #000;} .p{ width:200px;height:200px;background:red;float:left;} . clear{zoom:1;} .clear:after{display:block;clear:both;content:"";visibility:hidden;height:0} |
2.使用débordement属性
html代码 html代码 css代码
.box{ width:300px;border:1px solid #000;overflow:auto;} .p1{ width:260px;height:400px;background:Red;float:left;} |
css |
.box{ width:300px;border:1px solid #000;overflow:auto;} .p1{ width:260px;height:400px;background:Red;float:left;} |
||||||||||
3.使用affichage属性
html代码 html代码 css代码
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;} .p{ width:200px;height:200px;background:red;float:left;} 注意:父元素不能水平居中,在父元素使用text-align:center解决 |
css |
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;} .p{ width:200px;height:200px;background:red;float:left;} 注意:父元素不能水平居中,在父元素使用text-align:center解决 |
||||||||||
4.父级元素浮动
html代码 html代码 css代码
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;} .p{ width:200px;height:200px;background:red;float:left;} 注意:父元素不能水平居中,可以使用定位解决 position: relative; left: 50%; margin-left: -150px; |
css |
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}.p{ width:200px;height:200px;background:red;float:left;}注意:父元素不能水平居中,可以使用定位解决 position: relative;gauche : 50 %;margin-left : -150px; | ||||||||||
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!