幾種常用的清除浮動方法

阿新 • • 發佈：2019-01-13

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，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支援好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：程式碼多，不少初學者不理解原理，要兩句程式碼結合使用，才能讓主流瀏覽器都支援
建議：推薦使用，建議定義公共類，以減少CSS程式碼
評分：★★★★☆

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定義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不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的佈局時使用
評分：★★☆☆☆

4.父級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理解比較深的朋友使用
評分：★★★☆☆

5.父級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時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的程式碼不會出現滾動條就使用吧。
評分：★★☆☆☆

6.父級div也一起浮動

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;margin-bottom:10px;float:left}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決程式碼*/clear:both}
   
   .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>

原理：所有程式碼一起浮動，就變成了一個整體
優點：沒有優點
缺點：會產生新的浮動問題。
建議：不推薦使用，只作瞭解。
評分：★☆☆☆☆

7.父級div定義display:table

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;display:table;margin-bottom:10px;}
   .div2{background:#800080;border:1px solid red;height:100px;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>

原理：將div屬性變成表格
優點：沒有優點
缺點：會產生新的未知問題
建議：不推薦使用，只作瞭解
評分：★☆☆☆☆

8、結尾處加br標籤clear:both

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
   .div2{background:#800080;border:1px solid red;height:100px}
   
   .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>
<br class="clearfloat" />
</div>
<div class="div2">
   div2
   </div>

原理：父級div定義zoom:1來解決IE浮動問題，結尾處加br標籤clear:both
建議：不推薦使用，只作瞭解
評分：★☆☆☆☆

djjango cookie和session 的幾種常用需求使用方法

------https://www.cnblogs.com/liuqingzheng/articles/8990027.html 需求情形一：正常設定cookie def test_cookie_login(request): if request.method == 'POST':

轉Hash演算法解決衝突的方法一般有以下幾種常用的解決方法

Hash演算法解決衝突的方法一般有以下幾種常用的解決方法 1，開放定址法：所謂的開放定址法就是一旦發生了衝突，就去尋找下一個空的雜湊地址，只要散列表足夠大，空的雜湊地址總能找到，並將記錄存入公式為：fi(key) = (f(key)+di) MOD m (di=1,2

幾種常用的優化方法

在數學上，移動的距離可以通過 line search 令導數為零找到該方向上的最小值，但是在實際程式設計的過程中，這樣計算的代價太大，我們一般可以將它設定位一個常量。考慮一個包含三個變數的函式，計算梯度得到。設定 learning rate = 1，演算法程式碼如下： # Code from Chap

清除浮動的幾種常用方法

src 添加環繞 blog img eight 方式內聯元素特性首先，浮動這個樣式的出現，僅僅只是為了實現圖文環繞的效果，現在大多時利用浮動來布局；浮動：　　使元素推理文檔流，按照指定方向發生移動；　　遇到父級邊界或者相鄰的浮動元素會停下來；浮動的特性：　

幾種常用的清除浮動方法

1、父級div定義偽類：after和zoom <style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;

sql 的幾種常用方法

dataview 釋放資源 lose 總結 dap bool .sql res mar 第一個項目總結基類：database：主要是定義有關數據庫的方法: 1.打開數據庫 public static void Open() {

元素水平垂直居中的幾種常用方法

round IT spl translate 彈性 lex align mar con <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

PHP實現獲取文件後綴名的幾種常用方法

後綴名 get file cti lower urn rpo info 常用方法方法1： function get_file_type($filename){ $type = substr($filename, strrpos($filename, ".")+1)

[轉載]Scikit-learn介紹幾種常用的特徵選擇方法

#### [轉載]原文地址：http://dataunion.org/14072.html 特徵選擇(排序)對於資料科學家、機器學習從業者來說非常重要。好的特徵選擇能夠提升模型的效能，更能幫助我們理解資料的特點、底層結構，這對進一步改善模型、演算法都有著重要作用。特徵選擇主要有兩個功能：減少特

[轉載]Scikit-learn介紹幾種常用的特征選擇方法

valid 好的多重 variable 統計學助理相關性 sele 不出 #### [轉載]原文地址：http://dataunion.org/14072.html 特征選擇(排序)對於數據科學家、機器學習從業者來說非常重要。好的特征選擇能夠提升模型的性能，更能幫助我

javaScript中陣列的幾種常用方法

1.splice(2,3,4)刪除陣列中任意項(三個引數). 2.splice(1,3)刪除從第一項開始的往後三項(兩個引數).(splice可以結合pop(),unshift(),push(),shift()來理解) 3.push()在陣列的末尾增加一項. 4.unshift()在陣列

PHP實現獲取檔案字尾名的幾種常用方法

方法1： function get_file_type($filename){ $type = substr($filename, strrpos($filename, ".")+1); return $type; } 方法2： function get_file_type($filena

LaTeX文件插入圖片的幾種常用方法

LaTeX中一般只直接支援插入eps(Encapsulated PostScript)格式的圖形檔案, 因此在圖片插入latex文件之前應先設法得到圖片的eps格式的檔案. UNIX下的各種應用軟體都可以把其結果輸出為ps格式, 大部分軟體也可以輸出eps格式. 若軟體只能輸出ps

C# WinForm視窗關閉的幾種常用方法

呼叫程式外部的應用程式時，在關閉程式後，發現程序裡面還有在執行。原來是沒有完整的退出；下面有幾種方法退出。在FormClosing事件中新增即可。 1.this.Close(); 只是關閉當前視窗，若不是主窗體的話，是無法退出程式的，另外若有託管執行緒（非主

Unity中移動物體的幾種常用方法

簡介：在unity3d中，有多種方式可以改變物體的座標，實現移動的目的，其本質是每幀修改物體的position。1. 通過Transform元件移動物體 Transform 元件用於描述物體在空間中的狀態，它包括位置(position)，

C#啟動外部程式的幾種常用方法彙總

轉自https://www.cnblogs.com/randyzhuwei/p/5403922.html 本文彙總了C#啟動外部程式的幾種常用方法，非常具有實用價值，主要包括如下幾種方法：啟動外部程式，不等待其退出。啟動外部程式，等待其退出。啟動外部程式

java執行緒的幾種常用方法

join() Thread物件方法，用於使當前執行緒和後面的程式碼同步，使當前執行緒內操作執行完成後再執行後面的指令 wait() Thread物件方法，使當前執行緒進入等待狀態，等待狀態的執行緒不會去競爭資源 sleep() Thread類方法，使當前執行緒休眠指定時間

Java通過BufferedWriter追加內容到檔案末尾的幾種常用方法

java程式碼 import java.io.BufferedWriter; import java.io.FileOutputStream;

VxWorks嵌入式系統幾種常用的延時方法

1 taskDelay taskDelay(n)使呼叫該函式的任務延時n個tick(核心時鐘週期)。該任務在指定的時間內主動放棄CPU，除了taskDelay(0)專用於任務排程(將CPU交給同一優先順序的其他任務)外，任務延時也常用於等待某一外部事件，作為一種定

springmvc框架接收引數的幾種常用方法

1.第一種接收資料方式直接通過HttpServletRequest接收 @RequestMapping("/useradd") public ModelAndView UserId(HttpServletRequest request){ //接收前端傳送過來的資

幾種常用的清除浮動方法

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

2.在結尾處新增空div標籤clear:both

3.父級div定義height

4.父級div定義overflow:hidden

5.父級div定義overflow:auto

6.父級div也一起浮動

7.父級div定義display:table

8、結尾處加br標籤clear:both

相關推薦