欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

老生常談css中float的用法

  發(fā)布時(shí)間：2016-07-18 09:17:01   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇老生常談css中float的用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

關(guān)于float很早就接觸了，下面結(jié)合一個(gè)小demo談?wù)劇?/strong>

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

eg:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <li style="border-top: 1px #CCCCCC dashed;border-bottom: 1px #CCCCCC dashed;">  
  2.                     <div class="g-position_a">職位簡(jiǎn)介</div>  
  3.                     <div class="g-position_b">  
  4.                         <dl class="g-position_list fl">  
  5.                             <dd>職位名稱：php工程師</dd>  
  6.                             <dd>工作經(jīng)驗(yàn)：1-3年</dd>  
  7.                             <dd>招聘人數(shù)：10人</dd>  
  8.                             <dd>最低學(xué)歷：不限</dd>  
  9.                         </dl>  
  10.   
  11.                         <dl class="g-position_list fr">  
  12.                             <dd>月薪：3000-5000元（個(gè)稅計(jì)算）</dd>  
  13.                             <dd>年齡：不限</dd>  
  14.                         </dl>  
  15.                     </div>  
  16.                        
  17.  </li>  
  18.   
  19. <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ù)伍_"所存在的高度就會(huì)在頁(yè)面中重新表現(xiàn)出來(lái)；

eg:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. 　　　　　　　　<li>  
  2.                     <div class="g-position_a">職位簡(jiǎn)介</div>  
  3.                     <div class="g-position_b">  
  4.                         <dl class="g-position_list">  
  5.                             <dd>職位名稱：php工程師</dd>  
  6.                             <dd>工作經(jīng)驗(yàn)：1-3年</dd>  
  7.                             <dd>招聘人數(shù)：10人</dd>  
  8.                             <dd>最低學(xué)歷：不限</dd>  
  9.                         </dl>  
  10.   
  11.                         <dl class="g-position_list">  
  12.                             <dd>月薪：3000-5000元（個(gè)稅計(jì)算）</dd>  
  13.                             <dd>年齡：不限</dd>  
  14.                         </dl>  
  15.                     </div>  
  16.                     <div class="clearfix"></div>  
  17.              </li>  

以上這篇老生常談css中float的用法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/cyfm/archive/2016/07/17/5678240.html

相關(guān)文章

  • 詳解css中的float

    本文主要介紹了css中float的用法，以及網(wǎng)頁(yè)中常用的幾種布局方式。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
    2017-01-10

  • 深入理解和應(yīng)用css中Float屬性

    本篇文章主要介紹了css中Float屬性， 顧名思義,就是讓設(shè)置的標(biāo)簽產(chǎn)生浮動(dòng)效果,就是脫離原來(lái)頁(yè)面的標(biāo)準(zhǔn)輸出流。
    2016-12-21

  • CSS重要屬性之float學(xué)習(xí)心得(分享)

    下面小編就為大家?guī)?lái)一篇CSS重要屬性之float學(xué)習(xí)心得(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-08-18

  • css(display,float,position)深入理解

    下面小編就為大家?guī)?lái)一篇css(display,float,position)深入理解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-08-17

  • CSS使用float屬性設(shè)置浮動(dòng)元素的實(shí)例教程

    這篇文章主要介紹了CSS使用float屬性設(shè)置浮動(dòng)元素的實(shí)例教程,包括使用overflow清除浮動(dòng)的方法,需要的朋友可以參考下
    2016-07-07

  • 使用CSS的overflow屬性防止float撐開div的方法

    我們?cè)谑褂胒loat設(shè)定浮動(dòng)元素的時(shí)候經(jīng)常會(huì)遇到撐破div的情況,其中一種解決方法即是利用overflow: hidden,這里我們就來(lái)看一下使用CSS的overflow屬性防止float撐開div的方法:
    2016-07-07

  • CSS清除浮動(dòng)float的三種方法小結(jié)

    使元素脫離文檔流，按照指定方向發(fā)生移動(dòng)，遇到父級(jí)邊界或者相鄰的浮動(dòng)元素停了下來(lái)。本文給大家?guī)?lái)了CSS清除浮動(dòng)float的三種方法小結(jié)，感興趣的朋友跟隨腳本之家小編一起
    2018-03-13

最新評(píng)論