浮动的使用办法-CSDN博客

本文链接：https://blog.csdn.net/F_eve/article/details/109856847

一：为什么要使用浮动？

为了解决文字环绕问题。
解决横向排列问题。

二：浮动的基本特征:
float: left; (左浮动，元素靠上靠左)
float: right; (右浮动，元素靠上靠右)
默认值为：none
特点：当一个元素经过浮动后，元素必定变为快盒。浮动元素的包含快为父容器的内容盒。
三：浮动盒子尺寸

宽度或者高度为auto时，适应内容宽度或者高度。
margin为auto时，等同于0。
边框，内边距等于常规流布局。

举例：

<!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>
        *{
            margin: 0px;
            padding: 0px;
        }
        .content{  
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: red;
        }
        .two{
            background-color: red;
        }
        .three{
            background-color: red;
        }
        .four{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box one"></div>
        <div class="box two"></div>
        <div class="box three"></div>
        <div class="box four"></div>
    </div>
</body>
</html>

4个竖向排列的盒子
在这里插入图片描述我们用float来实现横向排列：

<!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>
        *{
            margin: 0px;
            padding: 0px;
        }
        .content{  
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: red;
        }
        .two{
            background-color: blue;
        }
        .three{
            background-color: green;
        }
        .four{
            background-color: yellow;
        }
        /* 浮动 */
        .fl{
            float: left;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box one fl"></div>
        <div class="box two fl"></div>
        <div class="box three fl"></div>
        <div class="box four fl"></div>
    </div>
</body>
</html>

这样就能达到我们想要的效果。
在这里插入图片描述这里我们设置的盒子的宽度加起来刚好是父容器的宽度，所以不会出现下面的这种情况：
这是因为其中一个盒子的宽度变大了，父容器剩余的宽度无法装下剩余的盒子，所以只能自动换行。且自动换行时，不会和其它兄弟容器同行，比如：我们改变绿色盒子的高度。
在这里插入图片描述