CSS(6)---通俗講解浮動(float)

時間 2019-11-17

標籤 css 通俗講解浮動 float 欄目 CSS 简体版

原文原文鏈接

CSS(6)---通俗講解浮動(float)

CSS有三模塊：盒子模型、浮動 、定位。上篇博客有講到盒子模型地址：CSS(5)---通俗講解盒子模型css

1、理解浮動

一、概念

概念 浮動能夠理解爲讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。html

若是是第一次據說確定仍是仍是一臉懵，下面我一步一步經過例子來解釋這句話。佈局

舉例說明code

咱們知道div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的標準流。htm

以下圖blog

能夠看出，由於div是塊級元素，因此即便div2的寬度很小，頁面中一行能夠容下div2和div3，div3也不會排在div2後邊，由於div元素是獨佔一行的。three

那麼咱們再看下浮動的做用，這裏我將div2浮動（對div2添加float:left;左浮動屬性）圖片

刷新頁面get

經過上下兩張圖片對比,咱們能夠直觀感受到，div2有種浮起來的感受，從以前的平面到立體的感受。也由於div2浮起來了，那麼它以前所佔的位置也就空出來了，博客

那麼div3和div4就能夠佔據以前div2的位置，因此它們都往上移動了。這樣咱們最終看到的效果就是div2和div3，div4有重疊，並且div2是在最上層。

那若是這是我在把div3也設置左浮動呢 (對div3添加float:left;左浮動屬性)

再次刷新頁面

一樣咱們能夠很直觀的看到，由於div2和div3目前都是左浮動，因此它們的位置都空出來了，這個時候div4就能夠往上移動，因此div2和div3都把div4部分給覆蓋了。

經過上面示例，咱們應該能夠理解什麼是浮動。這裏附上上面示例的代碼，能夠自行再研究下

<!DOCTYPE html>
<html> 
<head>
    <title>css浮動</title>
    <style type="text/css">
        div {
           text-align: center;
        }
        .one {
            background-color: gray;
            width: 300px;
            height: 50px;
        }
        .two {
            background-color: yellow;
            width: 100px;
            height: 120px;
            /*float:left;*/
        }
        .three {
            background-color: red;
            width: 150px;
            height: 50px;
            /*float:left;*/ 
        }

        .four {
            background-color: green;
            width: 300px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="one"> div1</div>
    <div class="two"> div2</div>
    <div class="three">div3 </div>
    <div class="four"> div4</div>
</body>
</html>

經過上面也能夠得出一些結論：

一、假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；

二、若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。

二、浮動的做用

浮動它主要有兩個做用:一、實現文本圍繞效果。二、實現塊級元素在一行顯示佈局。

1）實現文本圍繞效果

示例

<!DOCTYPE html>
<html> 
<head>
    <title>css浮動</title>
    <style type="text/css">
        .father {
            border: 3px solid #005588;
            padding: 1px;
           width: 300px;
        }
        img {
            width: 150px; 
            height: 150px;
            float:left;
        }
    </style>
</head>

<body>
<div class = "father">
    <img src="1.jpeg"/>
    這件衣服價值百萬，奢侈品牌是指服務於奢侈品的品牌。它是品牌等級分類中的最高等級品牌。在生活當中，奢侈品牌享有很特殊的市場和很高的社會地位。在商品分類裏，與奢侈品相對應的是大衆商品。奢侈品不只是提供使用價值的商品，更是提供高附加值的商品。
</div> 
</body>
</html>

運行結果

2)實現塊級元素在一行顯示佈局

如今不少時候會經過浮動，讓多個div實現一行顯示。固然當咱們沒有了解浮動以前咱們能夠經過將塊級元素轉換爲行內塊級元素來實現（display: inline-block）。

如圖

這樣確實能夠將多個div實如今同一行顯示。但這裏會有兩個小問題

一、咱們能夠看到div以前會有小縫隙，很難去除。
 二、若是我想讓其中一個div顯示在最右邊，實現起來會比較麻煩。

而上面兩個問題能夠經過浮動很輕易的解決。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssdiv元素局一行</title>
    <style>
    div {
        display: inline-block;
        width: 120px;
        height: 80px;
        /*float: left;*/
    }
    .one {
        background-color: pink;
    }
    .two {
        background-color: purple;
    }
    .three {
        background-color: red;
            /*float: right;*/
    }
    </style>
</head>
<body>
    <div class="one">div1</div>
    <div class="two">div2</div>
    <div class="three">div3</div>
</body>
</html>

運行結果

很明顯已經解決。

2、浮動語法

一、浮動的語法

在 CSS 中，咱們經過 float 屬性實現元素的浮動。float 屬性定義元素在哪一個方向浮動。

基本語法格式

選擇器 {float:屬性值;}

屬性值

二、浮動特性

浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。

注意 浮動的元素老是找理它最近的父級元素對齊。可是不會超出內邊距的範圍。

如圖

浮動特性

一、浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。
二、加了浮動的元素盒子是浮起來的，漂浮在其餘的標準流盒子上面。
三、加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置會給後面標準流的盒子。
四、一個父盒子裏面的子盒子，若是其中一個子級有浮動的，則其餘子級都須要浮動。這樣才能一行對齊顯示。
五、元素添加浮動後，元素會具備行內塊元素的特性。元素的大小徹底取決於定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。
六、假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間爲止。

總結 浮動的目更多的是爲了讓多個塊級元素同一行上顯示。

參考

一、w3school之CSS 浮動

二、CSS浮動(float,clear)講解

三、CSS 浮動

四、CSS浮動詳解

你若是願意有所做爲，就必須善始善終。(8)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。