浮动的细节

_处女座程序员的日常

已于 2023-03-02 22:12:33 修改

阅读量225

点赞数

分类专栏：前端 css html 文章标签： javascript css css3

于 2023-03-02 08:46:54 首次发布

本文链接：https://blog.csdn.net/qq_42931285/article/details/129293540

版权

前端同时被 3 个专栏收录

360 篇文章 12 订阅

订阅专栏

css

108 篇文章 0 订阅

订阅专栏

html

46 篇文章 1 订阅

订阅专栏

1.左浮动的盒子向上向左排列；
2.右浮动的盒子向上向右排列
3.浮动盒子的顶边不得高于上一个盒子的顶边（很关键）；
4.若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动（很关键，3和4是配合使用的）。

例如这里，4是不对的，高于了3的顶边，应该靠下。
在这里插入图片描述
这里才是正确的：
这个才是正确的：

下面再看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width:300px;
            height: 300px;
           border: 1px solid black;
        }
        .class2,.class3,.class4{
            width: 80px;
            height: 80px;
        }
        .class2{
            background-color: aqua;
            float: left;
        }
        .class3{
            background-color: yellow;
            float: left;
            height: 120px;
        }
        .class4{
            background-color: purple;
            float: left;
            width: 110px;
        }
        .class5{
            background-color: peru;
            float: right;
            height: 110px;
            width: 50px;
        }
        .class6{
            background-color:red;
            float: left;
            height: 110px;
            width: 150px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="class2"></div>
        <div class="class3"></div>
        <div class="class4"></div>
        <div class="class5"></div>
        <div class="class6"></div>
    </div>
</body>
</html>