float浮動

時間 2019-11-08

標籤 float 浮動欄目 CSS 简体版

原文原文鏈接

B站尚硅谷css視頻教程筆記css

網頁中的文檔流:html

　　文檔流處在網頁的最底層, 它表示的是一個頁面中的位置.
　　咱們在頁面中建立的元素默認都是處在文檔流中.ide

元素在文檔流中的特色:ui

　　* 塊元素:spa

　　　　1. 塊元素在文檔流中獨佔一行, 全部塊元素自上向下排列.
　　　　2. 塊元素在文檔流中的默認寬度(整個盒模型的寬度)爲父元素寬度(width)的100%.
　　　　3. 塊元素在文檔流中的高度默認被內容撐開.3d

　　* 內聯元素:code

　　　　1. 內聯元素在文檔流中只佔自身的大小(內容+左右內外邊距), 會默認從左向右排列; 若是一行中不足以容納全部的內聯元素,則換到下一行, 繼續自左向右.
　　　　2. 內聯元素好像有默認的一點點的外邊距?
　　　　3. 在文檔流中,內聯元素的寬度和高度默認都被內容撐開.視頻

塊元素在文檔流中默認垂直排列, 若是想要塊元素在頁面中水平排列,可使塊元素脫離文檔流, 可使用float浮動來脫離文檔流.htm

float: none / left / right;blog

1. 當一個元素設置爲浮動後, 脫離了文檔流, 它下面的元素會跑上來.
2. 元素浮動後, 會盡可能向頁面或父元素的左上或是右上漂浮, 直到遇到父元素的邊框或者其餘浮動元素.
3. 若是一行中容不下全部的浮動元素, 那麼會自動換行.
4. 若是浮動元素上邊是一個沒有浮動的塊元素, 則浮動元素不會超過塊元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            border: solid 1px red;
        }
        #div2{
            width: 200px;
            height: 200px;
            border: solid 1px green;
            float: right;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

View Code

5. 浮動元素不會超過他上邊的兄弟浮動元素(前一個浮動元素), 最多最多一邊齊.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{
            width: 500px;
            height: 100px;
            border: solid 1px green;
            float: left;
        }
        #div2{
            width: 500px;
            height: 200px;
            border: solid 1px red;
            float: left;
        }
        #div3{
            width: 100px;
            height: 100px;
            float: right;
            border: solid 1px yellow;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

View Code

6. 元素設置浮動後就徹底脫離了文檔流, 會覆蓋塊元素, 可是不會覆蓋文字.全部能夠經過設置浮動來實現文字環繞.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{
            width: 500px;
            height: 400px;
            background-color: green;
            border: solid 1px green;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: red;
            border: solid 1px red;
            float: left;
        }
    </style>
</head>
<body>
    <div id="div2"></div>
    <div id="div1">
            四色定理（世界近代三大數學難題之一），又稱四色猜測、四色問題，是世界三大數學猜測之一。
            四色定理的本質正是二維平面的固有屬性，即平面內不可出現交叉而沒有公共點的兩條直線。
            不少人證實了二維平面內沒法構造五個或五個以上兩兩相連區域，但卻沒有將其上升到邏輯關係和二維固有屬性的層面，
            以至出現了不少僞反例。不過這些偏偏是對圖論嚴密性的考證和發展推進。計算機證實雖然作了百億次判斷，
            終究只是在龐大的數量優點上取得成功，這並不符合數學嚴密的邏輯體系，至今仍有無數數學愛好者投身其中研究。
    </div>
</body>
</html>

View Code

7. 在文檔流中, 塊元素的寬度默認佔父元素的所有, 而塊元素脫離文檔流後, 寬度和高度都由內容撐開.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div{
            width: 200px;
            height: 50px;
            border: solid 2px red;
        }
        .div #div1{
            background-color: goldenrod;
        }
        .div #div2{
            float: left;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
    <div class="div">
        <div id="div1">
            abc
        </div>
    </div>
    <div class="div">
        <div id="div2">
            abc
        </div>
    </div>
</body>
</html>

View Code

8. 內聯元素脫離文檔流後會變成塊元素.

　　* 能夠設置寬高
　　...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span{
            /* width: 200px;
            height: 50px; */
            border: solid 2px red;
            float: left;
        }
        /* div{
            border: solid 2px red;
        } */
    </style>
</head>
<body>
    <!-- <div>星星</div> -->
    <span>星星</span>
    <span>星星</span>
    <span>星星</span>
    <span>星星</span>
</body>
</html>

View Code

=========================================================================================

當元素的寬度值爲auto時, 指定內邊距不會影響可見框的大小, 而是會自動修改寬度,以適應內邊距.

相關標籤/搜索

每日一句

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