CSS學習筆記——CSS中定位的浮動float

来源:http://www.cnblogs.com/laobeiV5/archive/2016/01/09/5116968.html
-Advertisement-
Play Games

昨天在解決了盒模型的問題之後又出現了新的知識模糊點:浮動和絕對定位?今天先解決浮動相關的問題,首先列舉出想要解決的問題:1.浮動到底是怎麼樣的?2.浮動對元素的影響有什麼?3.浮動主要用來乾什麼?第一個問題:浮動到底是怎麼樣的?W3CSCHOOL對浮動屬性的解釋:浮動的框可以向左或向右移動,直到它的...


昨天在解決了盒模型的問題之後又出現了新的知識模糊點:浮動和絕對定位?今天先解決浮動相關的問題,首先列舉出想要解決的問題:

1.浮動到底是怎麼樣的?

2.浮動對元素的影響有什麼?

3.浮動主要用來乾什麼?

 

第一個問題:浮動到底是怎麼樣的?

W3CSCHOOL對浮動屬性的解釋:浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。所以浮動也有left、right、none三種。

我個人的理解是:HTML 文件就像是一個方形的水槽,它在瀏覽器中載入的過程就好比是向水槽中放水,而這些水就代表的是頁面中的各個元素,他們都是有順序的進入水槽(文檔流的順序 和我們寫字一樣,從上到下從左到右)。當出現了一個具有浮動屬性(float)的元素時,就好像是水流中多了一塊泡沫,它會浮在水面上(也就是說明元素脫 離了文檔流)。在水流停止後(頁面載入完畢),這個元素會停靠在水槽的邊緣或者停靠在別的泡沫邊緣(浮動元素會處於包含框的邊緣或者另一個浮動元素的邊 緣)。

對於浮動元素是否脫離了文檔流,這個我剛開始也很迷糊,因為在看教學視頻的時候一個老師說沒有,另一個老師說有。於是就自己敲了代碼做了點實驗:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{

        height: 100px;
        background-color: #e13b00;
        float: left;
        clear: both;
    }

</style>
<body>
    <div id="div1">
        div1div1d
    </div>
    <p>1234567890
    </p>
    <p>1234567890
    </p>
</body>
</html>

上面代碼的效果如下:


紅色背景的Div是設置了左浮動的元素,根據浮動的定義它應該是脫離文檔流的,具體表現如下圖:

當我們審查第二個p標簽時發現這個標簽其實是覆蓋了DIV塊的,還是獨自占據一行,並不是從DIV塊的邊緣開始的。這就說明:

設置的浮動的元素其實是脫離的文檔流的,但是這個元素的內容還是會在視覺上占據空間,不會覆蓋其他元素或者被其他元素覆蓋。

 

2.浮動的元素對其他元素的影響有什麼?

浮動元素對其他元素的影響就如同上面的例子顯示的,浮動的元素會根據自己內容的大小把他之後的元素的內容擠到後面(特別註意,這裡說的是內容!是內容!是內容!)。

這裡特別說明一下:有些視頻教學里說浮動的影響只會作用在緊鄰在它後面的元素,這個說法還是有問題的,我上面舉得那個例子就說明瞭紅色的DIV塊浮動影響的是它後面的兩個p元素,而浮動的元素到底會影響多大範圍是根據浮動的元素它的內容的大小決定的。

清除浮動帶來的影響主要是通過兩種方式:

第一種:給不想受到影響的元素增加屬性clear:both/right/left. 這個屬性的意思並不是清除什麼,而是應該理解為擁有這個屬性的元素左邊或者右邊不允許存在浮動元素的內容。

例如我們給第一個p標簽增加了clear:left;這樣一個屬性,那麼它就會從DIV塊下麵開始出現,同時會把第二個p標簽也帶下來(因為他們是按照順序顯示的)。而我們給第二個p標簽增加clear:left,第一個p標簽還是受到浮動的影響的。

第二種:給不想受到影響的元素增加屬性width:100%;overflow:hidden;   這個方法也是有效的。

3.浮動主要用來乾什麼?

其實浮動的作用還是很重要的,我們可以利用它實現很常見的兩列或者多列的網頁佈局,下麵舉個例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{margin: 0px;padding: 0px}
    #div{
        width: 70%;
        margin: auto;
    }
    #header{
        height: 200px;
        background-color: darkslategrey;
    }
    #main{
        height: 300px;
        padding: 2%;
        background-color: #bfbfbf;
    }
    #left{
        float: left;
        width: 30%;
        height: 300px;
        background-color: #0044aa;
    }
    #right{
        float: right;
        width: 65%;
        height: 300px;
        background-color: yellow;
    }
    #footer{
        height: 200px;
        background-color: rosybrown;
    }

</style>
<body>
    <div id="div">
        <div id="header">
        </div>
        <div id="main">
            <div id="left"></div>
            <div id="right"></div>
        </div>
        <div id="footer">
        </div>
    </div>

</body>
</html>


效果如下:

這就是我們經常看到的一種網頁佈局,當然我這個例子有點簡陋,其實也可以把中間的部分換成三列或是更複雜的形式。

 

對浮動的學習就到這裡了,今天有一種感受就是:學習知識的過程中還是要多敲代碼多實驗,不能只看書中怎麼做或者視頻裡面老師怎麼做,他們思想也並不是就是完全正確。對於疑惑的問題不能馬虎帶過。當然不僅僅只是學習,在任何時候都該保持有自己的想法。

明天解決絕對定位的問題。

2016年01月09日

不積跬步,無以至千里

 

PS:我查閱的大部分資料都是來自於網路,如有侵權,請聯繫我刪除

 


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

-Advertisement-
Play Games
更多相關文章
  • 真機測試步驟1.運行Xcode,Xcode打開後,點左上角菜單'Xcode',點'Preferences'。2.在打開的視窗中,點'Accounts',切換到賬號頁,然後點下麵的'+'號,在彈出菜單中點擊'Add Apple ID'。3.在彈出的對話框中,填入你的AppleID和密碼(不需要$99的...
  • 部分代碼 InteractiveTransition 類繼承NSObject:- (instancetype)initWithPresentingController:(UITableViewController *)presentingVc presentedController:(UIViewC...
  • [1]typeof [2]Object.prototype.toString [3]constructor [4]instanceof
  • 雖然javascript是一門面向對象的編程語言,但這門語言同時也同時擁有許多函數式語言的特性。函數式語言的鼻祖是LISP,javascript設計之初參考了LISP兩大方言之一的Schenme,引入了Lambda表達式,閉包,高階函數等特性。使用這些特性,我們就可以靈活的編寫javascript代...
  • 超時調用需要使用window.setTimeout(code,millisec)方法它接受兩個參數:要執行的代碼和以毫秒錶示的時間(即在執行代碼前需要等待多少毫秒)。其中第一個參數可以是一個包含JS代碼的字元串(就和在eval()函數中使用的字元串一樣),也可以是一個函數。第二個參數表示等待多長時間...
  • 照例,現在開頭講個這個問題發生的背景吧: 因為最近要做個操作選項的呼出,然後就想到了用預設隱藏,滑鼠划過的時候顯示的方法。 剛開始打算添加一個class="active",直接觸發mouseover(或者mouseenter)的時候add,mouseout(或者mouseleave)的時候remov...
  • 首先還是先感謝github,感謝github上提供此段源碼的作者。跟昨晚的來比今天的靜態文件伺服器有點點複雜些,可以學到很多新的東西。仔細會發現這次的代碼多了一個fs.stat函數和ReadStream對象的pipe函數,stat這個函數是用來獲取文件信息。第一個參數是傳入文件路徑,第二個則是回調函...
  • 目錄結構參數介紹/*** * Created by laixiangran on 2015/12/22. * karma單元測試配置文件 */module.exports = function(config) { config.set({ /*** * 基礎路徑,...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...