怎么在css中使用float屬性

怎么在css中使用float屬性？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

1:在頁(yè)面布局中，假設(shè)有兩個(gè)div，需求是兩個(gè)div在同一排上；其中解決辦法之一就是利用浮動(dòng)，

eg:

XML/HTML Code復(fù)制內(nèi)容到剪貼板

2. <li style="border-top: 1px #CCCCCC dashed;border-bottom: 1px #CCCCCC dashed;">  
                       <div class="g-position_a">職位簡(jiǎn)介</div>  
                       <div class="g-position_b">  
                           <dl class="g-position_list fl">  
                               <dd>職位名稱：php工程師</dd>  
                               <dd>工作經(jīng)驗(yàn)：1-3年</dd>  
                               <dd>招聘人數(shù)：10人</dd>  
                               <dd>最低學(xué)歷：不限</dd>  
                           </dl>  
     
                           <dl class="g-position_list fr">  
                               <dd>月薪：3000-5000元（個(gè)稅計(jì)算）</dd>  
                               <dd>年齡：不限</dd>  
                           </dl>  
                       </div>  
                          
    </li>  
     
   <div class="box" style="width:300px;height:300px;></div>

2：上述代碼因?yàn)閘i里的兩個(gè)div左右浮動(dòng)(脫離了文檔流)，li將不具備有“頁(yè)面表現(xiàn)”的高度，所以li上下邊框線就會(huì)重合，

li其后的class名為box的div就會(huì)冒上來(lái)；

此刻的解決辦法是在其兩個(gè)浮動(dòng)的子div后面添加一個(gè)消除浮動(dòng)的div，此時(shí)li所因?yàn)?quot;內(nèi)部元素?fù)伍_(kāi)"所存在的高度就會(huì)在頁(yè)面中重新表現(xiàn)出來(lái)；

eg:

XML/HTML Code復(fù)制內(nèi)容到剪貼板

2. 　　　　　<li>  
                       <div class="g-position_a">職位簡(jiǎn)介</div>  
                       <div class="g-position_b">  
                           <dl class="g-position_list">  
                               <dd>職位名稱：php工程師</dd>  
                               <dd>工作經(jīng)驗(yàn)：1-3年</dd>  
                               <dd>招聘人數(shù)：10人</dd>  
                               <dd>最低學(xué)歷：不限</dd>  
                           </dl>  
     
                           <dl class="g-position_list">  
                               <dd>月薪：3000-5000元（個(gè)稅計(jì)算）</dd>  
                               <dd>年齡：不限</dd>  
                           </dl>  
                       </div>  
                       <div class="clearfix"></div>  
                </li>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。