<menu id="a2esi"><strong id="a2esi"></strong></menu>
  • <nav id="a2esi"></nav>
    學校總部  | 設為首頁 | 加入收藏 | 官方微信
    內威培訓
    打造“培訓+就業”一站式服務品牌!
    banner1
    • Python+AI工程師
    • Web前端工程師
    • Java軟件開發工程師

    首頁>>學員天地

    CSS中clear:both的使用詳解
    編輯:simon  閱讀:3124次  發布:13-05-19

    當DIV屬性設置float(浮動)時,其所在的物理位置已經脫離文檔流了,但是大多時候我們希望文檔仍能識別float(浮動),或者是希望float(浮動)后面的元素不被float(浮動)所影響,這個時候我們就需要用clear:both;來清除。

    舉例如下:
       <p style="float:left;width:200px;">這個是第1列,</p>
       <p style="float:right;width:400px;">這個是第2列,</p>
       <p>這個是第3列。</p>

    如果不用清除浮動,則第3列文字就會和第1、2列文字在一起,所以我們在第3個這列加一個“清除浮動”,改進如下:
       <p style="float:left;width:200px;">這個是第1列,</p>
       <p style="float:left;width:400px;">這個是第2列,</p>
       <p style="clear:left;">這個是第3列。</p>

    一般地,我們往往會將“清除浮動”單獨定義一個CSS樣式,如:.clear { clear: both;},然后使用<div class="clear"></div>來專門進行“清除浮動”。如上例可如下改寫:
       <p style="float:left;width:200px;">這個是第1列,</p>
       <p style="float:left;width:400px;">這個是第2列,</p>
       <div class="clear"></div>
       <p>這個是第3列。</p>

    但是這種方式與前者效果上會有些不同的,以下例說明:
    <style type="text/css">
       #main {background-color:#3399CC; width:600px; padding:20px; overflow:auto}
       #sidebar {background-color:#FF6600; float:left; width:130px;}
       #container {float:right; width:420px; background-color:#FFFF33;}
    </style>

    <div id="main">
       <div id="sidebar">第一段內容 第一段內容第一段內容</div>
       <div id="container">第二段內容 第二段內容第二段內容</div>
    </div>
    <p style="clear:both;">第三段內容</p>

    該頁面測試在IE下效果沒什么問題,即藍色塊內部有紅色和黃色兩個色塊內容,同時在藍色塊以下是第三段文本。不過FF的效果就是有問題,因此我們不能單單想在第三層上做清除就能完成任務,我們必須在浮動元素所在標簽閉合之前及時進行“清除”。上例應改進如下:
    <style type="text/css">
       #main { background-color:#3399CC; width:600px; padding:20px;}
       #sidebar {background-color:#FF6600; float:left; width:130px;}
       #container {float:right; width:420px; background-color:#FFFF33;}
       .clear {clear: both;}
    </style>

    <div id="main">
       <div id="sidebar">第一段內容 第一段內容第一段內容</div>
       <div id="container">第二段內容 第二段內容第二段內容</div>
       <div class="clear"></div>
    </div>
    <p>第三段內容</p>

    PS:對于因多加的<div class="clear"></div>標簽會引起IE和FF高度變化,通過如下方法解決:
    .clear {clear: both;height:1px;margin-top:-1px;overflow:hidden;}



    上一篇: Javascript實現的圖片自動切換   下一篇: 解決span float:right不能右對齊而是換行顯示
    返回列表
    網絡大專、自考本科,學歷輕松拿!
    ©2016-2020 上海內威職業技能培訓學校 版權所有
    普陀區武寧路1500號中樓2-3層(郵編:200062)
    咨詢:021-62434966  合作:021-13371929650  就業:021-62434966  傳真:  電郵:service@snetway.com
    《中華人民共和國電信與信息服務業務》經營許可證滬ICP備15002602號 
    <menu id="a2esi"><strong id="a2esi"></strong></menu>
  • <nav id="a2esi"></nav>
    本溪娱网棋牌