浮動

時間 2020-03-23

標籤浮動简体版

原文原文鏈接

1. 浮動

(1) 有三個div元素以下所示：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

結果：塊元素在文檔流中默認垂直排列，因此這三個div自上至下依次排開

(2) 若是將div改成行內塊元素html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .box3 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div><div class="box3"></div>
</body>
</html>

結果：注意box1和box2之間，box2和box3之間的區別。和空格有關。

(3) 若是但願塊元素在頁面中水平排列，能夠使塊元素脫離文檔流。使用float來使元素浮動，從而脫離文檔流。
可選值：spa

* none 默認值，元素默認在文檔流中排列
* left 元素會馬上脫離文檔流，向頁面的左側浮動
* right 元素會馬上脫離文檔流，向頁面的右側浮動

當爲一個元素設置浮動之後(即float屬性是一個非none的值),元素會馬上脫離文檔流，元素脫離文檔流之後，它下邊的元素會馬上向上移動。元素浮動之後，會盡可能向頁面的左上或者右上漂浮，直到遇到父元素的邊框或者其它元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            float: right;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

結果：
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            float: right;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            float: right;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

結果： box1 box2依次浮動在右上方。box2不會超過box1。
htm

若是浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素。舉例以下：blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            float: right;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

結果：box2的浮動並未超過未浮動的塊元素box1。
文檔

浮動的元素不會超過它上邊的兄弟元素，最多隻會一邊齊。舉例以下：it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            float: left;
            width: 300px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            float: left;
            width: 300px;
            height: 100px;
            background-color: yellow;
        }

        .box3 {
            float: right;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

相關標籤/搜索

每日一句

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