Maison > Article > interface Web > Introduction détaillée à l'utilisation de float en CSS
Je suis exposé au float depuis longtemps. Parlons-en avec une petite démo.
1 : Dans la mise en page, en supposant qu'il y ait deux p, la condition est que les deux p soient sur la même ligne ; une des solutions est d'utiliser float,
par exemple :
<li style="border-top: 1px #CCCCCC dashed;border-bottom: 1px #CCCCCC dashed;"> <p class="g-position_a">职位简介</p> <p class="g-position_b"> <dl class="g-position_list fl"> <dd>职位名称:php工程师</dd> <dd>工作经验:1-3年</dd> <dd>招聘人数:10人</dd> <dd>最低学历:不限</dd> </dl> <dl class="g-position_list fr"> <dd>月薪:3000-5000元(个税计算)</dd> <dd>年龄:不限</dd> </dl> </p> </li> <p class="box" style="width:300px;height:300px;></p>
2 : Le code ci-dessus est dû au fait que les deux p dans li flottent à gauche et à droite (hors du flux de documents), li Il n'y aura pas de hauteur "d'affichage de page", donc les bordures supérieure et inférieure de li se chevaucheront, et
p avec la boîte de nom de classe après li apparaîtra
;La solution actuelle La méthode consiste à ajouter un p qui élimine le p flottant après ses deux sous-p flottants. A ce moment, la hauteur de li due à "l'expansion de l'élément interne" réapparaîtra sur la page ; 🎜>
par exemple :
<li> <p class="g-position_a">职位简介</p> <p class="g-position_b"> <dl class="g-position_list"> <dd>职位名称:php工程师</dd> <dd>工作经验:1-3年</dd> <dd>招聘人数:10人</dd> <dd>最低学历:不限</dd> </dl> <dl class="g-position_list"> <dd>月薪:3000-5000元(个税计算)</dd> <dd>年龄:不限</dd> </dl> </p> <p class="clearfix"></p> </li>