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>

Ce qui précède Ce cliché sur l'utilisation de float en CSS est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez le site Web PHP chinois.

Pour une introduction plus détaillée à l'utilisation de float en CSS et des articles connexes, veuillez faire attention au site Web PHP chinois !