浮动

时间 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>