網站前端全方位清理浮動
2024-03-02 分類： 網站建設
清除浮動一個凡是做頁面的人都會遇到的一個東西，但是是否大家都能夠清楚的知道，全方位的了解呢？于是一閑下來了馬上寫了這樣的一篇文章，不能講面面俱到，然而基本能將我所知道的傾囊相授了。
我們粗略的一起來看看清除浮動的辦法一共有多少個。對應的DEMO
采用偽類:after進行后續空制的高度位零的偽類層清除
采用CSS overflow:auto的方式撐高
采用CSS overflow:hidden的方式產生怪異適應
采用display:table將對象變成table形式
采用div標簽，以及css的clear屬性
采用br標簽，以及css的clear屬性
采用br標簽，以及其自身HTML的clear屬性
粗略的看，他們都能將問題解決；然而他們另外一方面又有著各自的利弊。（一一對應）
優點結構語義化完全正確，不會產生其余的怪異問題。
缺點復用方式不當容易造成代碼量急劇增大。
建議最外層輕浮動時使用，或清晰模塊化復用方式的人使用。
優點結構語義化完全正確，代碼量極少。
缺點多個嵌套后，點擊最外層的輕浮動框會遭成最外層至最內層內容全選（FF）；或者在mouseover造成寬度改變時會出現最外層模塊有滾動條（IE）。
建議內個模塊使用，請勿嵌套。
優點結構語義化完全正確，代碼量極少。
缺點內容增多時候極易不會自動換行而內容被隱藏掉。
建議寬度固定時使用，請勿嵌套。
優點結構語義化完全正確，代碼量極少。
缺點盒模型屬性已經改變，可想而知奇異事件自然多得你數都數不到。
建議如果你不想改Bug改死你的話，最好不要使用；不過可以作為alpha版本當中臨時性的忽悠下測試。
優點代碼量極少，復用性極高。
缺點完全不能完美的適應語義化，不利于改版以及需求變更。
建議初學者使用，可以讓你快速的解決浮動問題。
優點語義化程度比第5種情況要更優；代碼量極少，復用性極高。
缺點語義化依舊不完美，不利于改版以及需求變更。
建議初學者使用，可以讓你快速的解決浮動問題。
優點語義化程度比第5、6種情況要更優；代碼量最少，復用性極高。
缺點語義化依舊不完美，不利于改版以及需求變更。
建議引導初學者思維升級時使用，讓其明白與其用classname來控制一種表現，倒不如回歸到WEB1.0的時代的網頁直接用html屬性來控制表現，畢竟后者的代碼量更少。
最后，列舉完畢。
我們粗略的一起來看看清除浮動的辦法一共有多少個。對應的DEMO
采用偽類:after進行后續空制的高度位零的偽類層清除
采用CSS overflow:auto的方式撐高
采用CSS overflow:hidden的方式產生怪異適應
采用display:table將對象變成table形式
采用div標簽，以及css的clear屬性
采用br標簽，以及css的clear屬性
采用br標簽，以及其自身HTML的clear屬性
粗略的看，他們都能將問題解決；然而他們另外一方面又有著各自的利弊。（一一對應）
優點結構語義化完全正確，不會產生其余的怪異問題。
缺點復用方式不當容易造成代碼量急劇增大。
建議最外層輕浮動時使用，或清晰模塊化復用方式的人使用。
優點結構語義化完全正確，代碼量極少。
缺點多個嵌套后，點擊最外層的輕浮動框會遭成最外層至最內層內容全選（FF）；或者在mouseover造成寬度改變時會出現最外層模塊有滾動條（IE）。
建議內個模塊使用，請勿嵌套。
優點結構語義化完全正確，代碼量極少。
缺點內容增多時候極易不會自動換行而內容被隱藏掉。
建議寬度固定時使用，請勿嵌套。
優點結構語義化完全正確，代碼量極少。
缺點盒模型屬性已經改變，可想而知奇異事件自然多得你數都數不到。
建議如果你不想改Bug改死你的話，最好不要使用；不過可以作為alpha版本當中臨時性的忽悠下測試。
優點代碼量極少，復用性極高。
缺點完全不能完美的適應語義化，不利于改版以及需求變更。
建議初學者使用，可以讓你快速的解決浮動問題。
優點語義化程度比第5種情況要更優；代碼量極少，復用性極高。
缺點語義化依舊不完美，不利于改版以及需求變更。
建議初學者使用，可以讓你快速的解決浮動問題。
優點語義化程度比第5、6種情況要更優；代碼量最少，復用性極高。
缺點語義化依舊不完美，不利于改版以及需求變更。
建議引導初學者思維升級時使用，讓其明白與其用classname來控制一種表現，倒不如回歸到WEB1.0的時代的網頁直接用html屬性來控制表現，畢竟后者的代碼量更少。
最后，列舉完畢。
網站名稱：網站前端全方位清理浮動
文章路徑：http://m.kartarina.com/news49/319699.html
成都網站建設公司_創新互聯，為您提供手機網站建設、移動網站建設、App開發、服務器托管、定制網站、
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- 成都網站建設：網站建設的誤區 2024-03-02
- 企業選擇成都小程序制作是對的！關于運營還需要做好這四件事！ 2024-03-02
- 成都小程序制作商城怎樣進行運營推廣？有哪些方法需要掌握？ 2024-03-02
- 成都app開發：90后如何玩轉旅游App？ 2024-03-02
- 怎樣分析網站站內優化做的優劣？ 2024-03-02
- 有關簡潔網頁設計需知的6點技巧 2024-03-02
- 成都企業建站之后網站的后續維護方式有哪些？ 2024-03-02
- 成都app開發：互聯網金融市場得app者得天下！ 2024-03-02
- 為什么美國KT專用服務器上的數據備份很重要？在專用服務器上備份網站數據的方法 2024-03-02
- 中小企業進行成都網站建設需要注意的問題有哪些 2024-03-02
- 關于搜索引擎界面設計 2024-03-02
- 做好網站排名優化讓您在行業競爭中立于不敗之地 2024-03-02
- 企業如何通過短視頻營銷打造自身品牌？創新互聯全網營銷 2024-03-02
- 成都競價托管：網站推廣常用的方法有哪些 2024-03-02
- 成都網站建設：常見的正則表達式應用實例應用 2024-03-02
- 服務器挖礦-為什么需要云挖礦？ 2024-03-02
- 建設一個裝飾裝修公司網站需要多少錢？ 2024-03-02
- 盤錦社交小程序開發回應新時代需求 2024-03-02
- 成都做網站哪家好? 2024-03-02