CSS--盒子的浮动

标签：浮动盒子 -- float color background CSS left

盒子浮动概念

浮动是CSS中的一种定位方式，可以使元素脱离正常的文档流，并相对于其父元素或其他元素进行定位。

在布局中，可以使用浮动来实现盒子的位置调整和元素的排列。通过设置元素的float属性为left或right，可以使元素向左或向右浮动。浮动的元素会尽可能地靠向父元素的边缘或其他浮动元素的边缘。

float:left; 左浮动

float:right; 右浮动

脱离文档流

盒子浮动后，将脱离其原本位置，文档流后面的元素会自动递补其位置。

盒子浮动起来后，会生成一个与父盒等宽的浮层。

浮动盒排列规则：

1.向上向左or向上向右排列

2.当空间无法容纳，则先向下移动，直到高度足够后再向左向右

3.当前浮动盒的顶边，不得高于上一个浮动盒的顶边

实验一（左浮动）

左浮动：第一个设置左浮动的盒子浮至浮层，其他设置左浮动的盒子紧跟其后，从左到右排列，直到放不下才换行。

初始文档流

<style>
        article{
            /* 设置父盒宽高，背景色，下外边距 */
        width: 800px;
        height: 900px;
        background-color: gray;
        margin-bottom: 5px;
    }
    div{
        /* 设置div标签样式 */
        width: 200px;
        height: 100px;
        background-color: pink;
        margin-bottom: 5px;
        
    }
</style>
<body>
     <article>
    <div id="div1">盒子1</div>
    <div id="div2">盒子2</div>
    <div id="div3">盒子3</div>
    <div id="div4">盒子4</div>
    <div>盒子5</div>
     </article>
    
</body>

将盒子1左浮动

#div1{
        background-color: red;
        float: left;
    }

本例中只将盒子1进行了左浮动，该元素同样脱离文档流向左移动，直到它的左边缘碰到包含框的左边缘。如上图所示：由于盒子1不再处于文档流中，所以它不占空间，实际上覆盖了盒子2，导致盒子2从布局中消失。

将盒子2左浮动

#div2{
        background-color: blue;
        float: left;
    }

本例中将盒子2进行了左浮动，盒子2向左浮动紧随盒子1后面。而由于盒子1与盒子2都脱离了文档流，那么所空出的位置就有了两个，所以盒子3和盒子4向上递补位置。

将所有盒子左浮动

#div1{
        background-color: red;
        float: left;
    }
    #div2{
        background-color: blue;
        float: left;
    }
    #div3{
        background-color: green;
        float: left;
    }
    #div4{
        background-color: orange;
        float: left;
    }
    #div5{
        background-color: yellow;
        float: left;
    }

本例中将所有盒子进行了左浮动，在这里我们可以看到，所有左浮动的盒子都紧随其后进行排列，但盒子5却排到了第二行的左边，这是因为父盒的容量不够，当空间无法容量时，盒子向下移动，直到高度足够后在向左或向右移动。

不规则盒子左浮动

<style>
        article{
            /* 设置父盒宽高，背景色，下外边距 */
        width: 800px;
        height: 900px;
        background-color: gray;
        margin-bottom: 5px;
    }
    div{
        /* 设置div标签样式 */
        
        background-color: pink;
        margin-bottom: 5px;
        
    }
    #div1{
        width: 200px;
        height: 100px;
        background-color: red;
        float: left;
    }
    #div2{
        width: 200px;
        height: 100px;
        background-color: blue;
        float: left;
    }
    #div3{
        width: 200px;
        height: 300px;
        background-color: green;
        float: left;
    }
    #div4{
        width: 200px;
        height: 100px;
        background-color: orange;
        float: left;
    }
    #div5{
        width: 200px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
    </style>
</head>
<body>
    
     <article>
    <div id="div1">盒子1</div>
    <div id="div2">盒子2</div>
    <div id="div3">盒子3</div>
    <div id="div4">盒子4</div>
    <div id="div5">盒子5</div>
     </article>
    
</body>

本例中展示了当父盒容量不够，不足以排列下所有的盒子时，那么部分元素将会向下移动，直到有足够的空间容纳下它，如上图所示，如果浮动元素高度各不相同，那么当它们向下移动时可能被其他浮动元素挡住。

说明：浮动元素盒子3的高度超过了向下移动的浮动元素盒子5的高度，因此出现了盒子5向下移动时被盒子3挡住的现象。如果浮动元素盒子3的高度小于浮动元素盒子5的高度，就不会发生盒子3向下移动时被挡住的现象。

实验二（右浮动）

将盒子1右浮动

#div1{
        background-color: red;
        float: right;
    }

本例中将盒子1右浮动，原本属于盒子1的位置被后面的盒子向上递补位置。

将所有盒子右浮动

<!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>
        article{
            /* 设置父盒宽高，背景色，下外边距 */
        width: 800px;
        height: 900px;
        background-color: gray;
        margin-bottom: 5px;
    }
    div{
        /* 设置div标签样式 */
        width: 200px;
        height: 100px;
        background-color: pink;
        margin-bottom: 5px;
        
    }
    #div1{
        background-color: red;
        float: right;
    }
    #div2{
        background-color: blue;
        float: right;
    }
    #div3{
        background-color: green;
        float: right;
    }
    #div4{
        background-color: orange;
        float: right;
    }
    #div5{
        background-color: yellow;
        float: right;
    }
    </style>
</head>
<body>
    <!-- 让盒子从右到左浮动 ，共用浮动层，浮层位置不够，换行。
     脱离文档流-->
     <article>
    <div id="div1">盒子1</div>
    <div id="div2">盒子2</div>
    <div id="div3">盒子3</div>
    <div id="div4">盒子4</div>
    <div id="div5">盒子5</div>
     </article>
    
</body>
</html>

所有元素向右浮动，那么盒子1向右移动直到碰到右边框时静止，另外的盒子也向右浮动，直到碰到前一个浮动框也静止。如上图所示，这样就将纵向排列的div容器变成了横向排列。

本章结束，感谢观看

标签：浮动,盒子,--,float,color,background,CSS,left
From： https://blog.csdn.net/2301_82005922/article/details/143088529

盒子浮动概念

`float:left; 左浮动`

`float:right; 右浮动`