css中float的用法詳細介紹

來源：懂視網責編：小采時間：2020-11-27 18:52:51

css中float的用法詳細介紹

css中float的用法詳細介紹:關于float很早就接觸了，下面結合一個小demo談談。1:在頁面布局中，假設有兩個p，需求是兩個p在同一排上；其中解決辦法之一就是利用浮動，eg:<li style="border-top: 1px #CCCCCC dashed;border-bottom: 1px #CCCCCC

推薦度：

點擊下載本文 文檔為doc格式

導讀css中float的用法詳細介紹:關于float很早就接觸了，下面結合一個小demo談談。1:在頁面布局中，假設有兩個p，需求是兩個p在同一排上；其中解決辦法之一就是利用浮動，eg:<li style="border-top: 1px #CCCCCC dashed;border-bottom: 1px #CCCCCC

關于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中文網！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com