第十九届：浮动

视觉格式化模型，大体上将页面中的盒子的排列分为三种方式：
1、常规流（行盒、块盒）
2、浮动
3、定位

浮动应用场景

1、文字环绕
2、横向排列

浮动的基本特点

修改float属性值为：

left：左浮动，元素靠左上靠
right：右浮动，元素考上靠右
默认值为none

1、当一个元素浮动后，元素必定为块盒(更改display属性为block)
2、浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

1、宽度为auto时，适应内容宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 500px;
            background-color: lightblue;
        }

        .container div {
   
            height: 100px;
            background-color: red;
        }

        .container .left {
            float: left;
        }
        .container .right{
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            Lorem ipsum dolor sit amet.
        </div>
        <div class="right">
            Lorem ipsum dolor sit amet.
        </div>
    </div>
</body>
</html>

image.png

2、高度为auto时，与常规流一致，适应内容的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 500px;
            background-color: lightblue;
        }
        .container div {
   
            background-color: red;
        }

        .container .left {
            float: left;
        }
        .container .right{
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            Lorem ipsum dolor sit amet.
        </div>
        <div class="right">
            Lorem ipsum dolor sit amet.
        </div>
    </div>
</body>
</html>

image.png

3、margin为auto时，为0
4、边框、内边距、百分比设置与常规流一样

盒子排列

1、左浮动的盒子靠左排列
2、右浮动的盒子靠右排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1000px;
            height: 500px;
            background-color: lightblue;
        }
        .item {
            float: left;
            margin: 5px;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>

    </div>
</body>
</html>

image.png

3、浮动盒子在包含块中排列时，会避开常规流块盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1000px;
            height: 500px;
            background-color: lightblue;
        }
        .item {
            float: right;
            margin: 5px;
            background-color: red;
            font-size: 2em;
        }
        .normal {
            height: 60px;
            background-color: #008c8c;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="normal"></div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>

    </div>
</body>
</html>

image.png

4、常规流块盒在后面会被覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1000px;
            height: 500px;
            background-color: lightblue;
        }
        .item {
            float: right;
            margin: 5px;
            background-color: red;
            font-size: 2em;
        }
        .normal {
            height: 60px;
            background-color: #008c8c;
        }

    </style>
</head>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="normal"></div>

    </div>
</body>
</html>

image.png

5、行盒在排列时，会避开浮动盒子

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字
，该行盒叫做匿名行盒。

高度坍塌

常规流盒子在计算高度的时候不会计算浮动元素
可以使用clear清除浮动来解决
clear:

默认值：none
left:清除左浮动该元素必须出现在前面所有左浮动的盒子下方
right：清除右浮动，该元素必须出现在前面所有右浮动的盒子下方
both:清除全部浮动，该元素必须出现在前面所有浮动的盒子下方
也可以使用伪元素选择器

.clearfix::after {
  content:'',
  display:block,
  clear:both
}