css中float的用法詳細介紹-css教學-PHP中文網

css中float的用法詳細介紹

高洛峰

發布： 2017-03-07 14:07:44

原創

1752 人瀏覽過

關於float很早就接觸了，下面結合一個小demo談談。

1:在頁面佈局中，假設有兩個p，需求是兩個p在同一排上；其中解決方法之一就是利用浮動，

#eg:

<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：上述程式碼因為li裡的兩個p左右浮動(脫離了文檔流)，li將不具備有「頁面表現」的高度，所以li上下邊框線就會重合，

li其後的class名為box的p就會冒上來；

此刻的解決辦法是在其兩個浮動的子p後面加上一個消除浮動的p，此時li所因為"內部元素撐開"所存在的高度就會在頁面中重新表現出來；

#eg:

　　　　　　　　<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>

登入後複製

#以上這篇老生常談css中float的用法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多css中float的用法詳細介紹相關文章請關注PHP中文網！