<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »CSS如何實現使浮動元素的父元素自動擴展

        CSS如何實現使浮動元素的父元素自動擴展

        至成科技 2017-12-18 訪問量(997) 評論(0)
        摘要:在網站的前端工作中,經常會遇到使用浮動布局的情況。 我們都知道,如果一個父元素內部含有的幾個子元素如果浮動的話,而在浮動后其父元素會收縮,如果父元素內除了浮動元素外沒有其他元素的話,父元素的高度甚至會收縮到低,從而導致頁面底部的元素上移,較終破壞了頁面的布局。

        在網站的前端工作中,經常會遇到使用浮動布局的情況。

        我們都知道,如果一個父元素內部含有的幾個子元素如果浮動的話,而在浮動后其父元素會收縮,如果父元素內除了浮動元素外沒有其他元素的話,父元素的高度甚至會收縮到0,從而導致頁面底部的元素上移,較終破壞了頁面的布局。

        對于這種情況,有些人可能選擇在浮動元素的底部加一個<br/>標簽,并對這個<br/>定義clear:both;的樣式定義,從而清除浮動,使浮動元素的父元素自動擴展。但這樣做,又導致無效標簽的使用。目前,業界較優的解決方案是使用:after偽類來實現清除浮動,從而可以使用.clear:after{content:"."; height:0; display:block; clear:both; visibility:hidden;} .clear{zoom:1;}來實現。

        當然,這在通過CSS在元素之后追加"."并不必要,因為還需要visibility來隱藏掉它。通過優化,代碼如下:
        .clear:after{content:"020";display:block;height:0;clear:both;} .clear{zoom:1;}
           其中,020指在容器后添加空格,這樣就避免使用visibility隱藏可視性了。
           另外,不推薦使用空div的方法。單單為了清除浮動而在結構良好的HTML中插入沒有語義的容器,未免有些突兀。

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划 澳洲幸运5的计算公式 11选5技巧 3d太湖钓叟三字诀 老玩斗地主易得啥病 广西快乐十分购买 内蒙古快3开奖结果59期 福彩3d号码系统 牛牛冒险岛 中国体育彩票官网61 河南22选5大星走势图 福利彩票双色球走势图 058期平特一肖 2019双色球和值走势图 最好玩的单机真人游戏 体彩四川金7乐玩法介绍