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

時間 2019-11-26

標籤 css 學習筆記定位浮動 float 欄目 CSS 简体版

原文原文鏈接

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

1.浮動究竟是怎麼樣的？瀏覽器

2.浮動對元素的影響有什麼？
網絡

3.浮動主要用來幹什麼？佈局

第一個問題：浮動究竟是怎麼樣的？學習

W3CSCHOOL對浮動屬性的解釋：浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因此浮動也有left、right、none三種。code

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

對於浮動元素是否脫離了文檔流，這個我剛開始也很迷糊，由於在看教學視頻的時候一個老師說沒有，另外一個老師說有。因而就本身敲了代碼作了點實驗：htm

<!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是設置了左浮動的元素，根據浮動的定義它應該是脫離文檔流的，具體表現以下圖：it

當咱們審查第二個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：我查閱的大部分資料都是來自於網絡，若有侵權，請聯繫我刪除