常用的CSS清除浮動的方法優缺點分析(個人學習筆記)

来源:http://www.cnblogs.com/ahao68/archive/2016/04/25/5430047.html
-Advertisement-
Play Games

一、拋一塊問題磚(display: block)先看現象: 分析HTML代碼結構: 分析CSS代碼樣式: 這裡沒有給最外層的DIV.outer 設置高度,但是我們知道如果它裡面的元素不浮動的話,那麼這個外層的高是會自動被撐開的。但是當內層元素浮動後,就出現了一下影響: (1):背景不能顯示 (2): ...


一、拋一塊問題磚(display: block)先看現象:

    分析HTML代碼結構:

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

  

     分析CSS代碼樣式:

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

      這裡沒有給最外層的DIV.outer 設置高度,但是我們知道如果它裡面的元素不浮動的話,那麼這個外層的高是會自動被撐開的。但是當內層元素浮動後,就出現了一下影響:

    (1):背景不能顯示 (2):邊框不能撐開 (3):margin 設置值不能正確顯示

      當一個內層元素是浮動的時候,如果沒有關閉浮動時,其父元素也就不會再包含這個浮動的內層元素,因為此時浮動元素已經脫離了文檔流。也就是為什麼外層不能被撐開了!

解決辦法如下(使用其他代碼示例):

1、父級div定義偽類:after和zoom

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*清除浮動代碼*/
   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
   .clearfloat{zoom:1}
   </style> 
<div class="div1 clearfloat"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">
   div2
   </div>
  • 原理:IE8以上和非IE瀏覽器才支持:after,zoom(IE轉有屬性)可解決ie6,ie7浮動問題。其中clear:both;指清除所有浮動;content: '.'; display:block;對於FF/chrome/opera/IE8不能缺少,其中content()可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它,但是不顯示出來,這樣才能實現清楚浮動。
  • 優點:瀏覽器支持好,不容易出現怪問題(目前:大型網站都有使用,如:騰迅,網易,新浪等等)
  • 缺點:代碼多,不少初學者不理解原理,要兩句代碼結合使用,才能讓主流瀏覽器都支持
  • 建議:推薦使用,建議定義公共類,以減少CSS代碼。(相對於空標簽閉合浮動的方法代碼似乎還是有些冗餘,通過查詢發現Unicode字元里有一個“零寬度空格”,也就是U+200B,這個字元本身是不可見的,所以我們可以考慮省略掉 visibility:hidden )       
  • 評分:★★★★☆

 

2、結尾處加空div標簽clear:both

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*清除浮動代碼*/
   .clearfloat{clear:both}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
   div2
   </div>
  • 原理:添加一個空div,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度
  • 優點:簡單,代碼少,瀏覽器支持好,不容易出現怪問題
  • 缺點:不少初學者不理解原理;如果頁面浮動佈局多,就要增加很多空div,讓人感覺很不爽
  • 建議:不推薦使用,但此方法是以前主要使用的一種清除浮動方法
  • 評分:★★★☆☆

 

3、父級div定義overflow:hidden

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
   </div>
  • 原理:必須定義width或zoom:1,同時不能定義height,使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度
  • 優點:簡單,代碼少,瀏覽器支持好
  • 缺點:不能和position配合使用,因為超出的尺寸的會被隱藏,無法顯示需要溢出的元素
  • 建議:只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用
  • 評分:★★★☆☆

4、父級div定義overflow:auto

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:auto}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
   </div>
  • 原理:必須定義width或zoom:1,同時不能定義height,使用overflow:auto時,瀏覽器會自動檢查浮動區域的高度
  • 優點:簡單,代碼少,瀏覽器支持好
  • 缺點:內部寬高超過父級div時,會出現滾動條。
  • 建議:不推薦使用,如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
  • 評分:★★☆☆☆

5、父級div定義height

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">
   div2
   </div>
  • 原理:父級div手動定義height,就解決了父級div無法自動獲取到高度的問題
  • 優點:代碼簡潔
  • 缺點:高度被固定死了,只適合高度固定的佈局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題
  • 建議:不推薦使用,只建議高度固定的佈局時使用
  • 評分:★★☆☆☆

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一.意圖 將一個複雜對象的構建與它的表示分離,使得同樣的構造過程可以創建不同的表示。 二.動機 一個複雜的對象的構造過程中,原料相同,可能會要求生產不同的產品,並且生產的產品種類還能夠方便的增加。Bulider模式期望將解析原材料的過程與利用原材料生產產品的過程分離開,以達到用戶不需要知道根據原材料 ...
  • 兩年前接觸到了微服務的概念,面對日益膨脹的系統感覺豁然開朗。之後的兩年逐步把系統按微服務的架構理念進行了重構,並將業務遷移到了新架構之上。感覺現在差不多是時候寫一篇關於微服務的總結文章了。 定義 在 Martin Fowler & James Lewis 的文章(參考[1])里給出了微服務架構的一個 ...
  • 本文由@呆代待殆原創,轉載請註明出處。 單例模式簡述 單例模式保證了我們的類只有一個實例,並且我們在任何時候都可以取得這個實例,其中保證我們的類有且僅有一個實例在某些時候是相當重要的事情,比如我們只需要一個線程池而不是兩個等等,但是我們也要註意,單例模式適用的情況比我們想象中的要少,所以請不要濫用這 ...
  • 基本簡介 frontpage網頁設計軟體是微軟公司出品的一款網站製作入門級軟體。frontpage製作網站軟體使用方便簡單,會用Word就能做網頁,微軟在2006年年底前將停止提供FrontPage軟體。Microsoft SharePoint frontpage 2003套件可與 Microsof ...
  • 1.想要在自己的設備上運行Android,必須為自己的設備開發特定軟體,這個為特定設備定製Android的過程被稱為“移植”。 2.Android的系統構架分為:最底層Linux內核,和其他Linux系統的差異很小;再上一層是C/C++代碼庫;再上一層是Android SDK API,這一層是用ja ...
  • 客戶端與伺服器新建套接字連接的一種方法 背景   最近在做一個C/S文件管理系統,想要把客戶端命令跟文件的傳輸分開進行,這就要求我們重新在客戶端與伺服器之間建立一個新的套接字連接。 問題   首先我們知道C/S伺服器每接到一個客戶的鏈接請求後,都將建立一個新的 ...
  • 之前我(夢在旅途)發表過一篇名為《深入分析面向對象中的對象概念》的文章,裡面主要講解了類與對象的關係以及對象的概念、狀態、行為、角色幾個知識點,讓大家對對象有了一些深入的瞭解,而本文則再來談談面向對象的三大特性之一:封裝,封裝是實現面向對象的基礎,深入的理解封裝的特性,有利於我們能更好的領悟面向對象 ...
  • 1. REST名稱由來 REST全稱為Representational State Transfer,即表述性狀態轉移,最早由Roy Feilding博士在世紀之交(2000年)提出,喜歡追根溯源的朋友可以讀一下他的博士論文《Architectural Styles and the Design o ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...