浮动的7大特性

最新推荐文章于 2022-11-24 13:54:31 发布

DangR-Jisoo

最新推荐文章于 2022-11-24 13:54:31 发布

阅读量379

点赞数

分类专栏：前端基础 CSS样式

本文链接：https://blog.csdn.net/Angela_Connie/article/details/110091791

版权

前端基础同时被 2 个专栏收录

30 篇文章

订阅专栏

CSS样式

15 篇文章

订阅专栏

浮动的7大特性

浮动的元素会脱离标准流

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 500px;
            margin: 100px auto;
            border: 10px solid red;
        }
        .box2 {
            /* float: left; */
            width: 500px;
            height: 300px;
            background-color: wheat;
        }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

若没有给.box2设置浮动，运行结果为下图所示：
在这里插入图片描述
但是若给.box2设置浮动后，结果如下图所示

由上述例子可以看出，元素设置浮动后会脱离标准流

浮动的元素会一行显示，并且元素顶部对齐

<style>
        .box1 {
            float: left;
            width: 200px;
            height: 100px;
            background-color: wheat;
        }
        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box3 {
            float: left;
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .box4 {
            float: left;
            width: 400px;
            height: 500px;
            background-color: yellow;
        }
</style>
<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
    <div class="box4">盒子4</div>
</body>

在这里插入图片描述

任何类型的元素都可以设置浮动，浮动后具有行内块元素的特点
浮动的盒子不再保留原来的位置

.box1 {
            /* float: left; */
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
        
        .box2 {
            width: 300px;
            height: 300px;
            background-color: violet;
 }
 <div class="box1"></div>
<div class="box2"></div>

在没有给.box1元素设置浮动之前，运行结果是.box1在.box2上显示，两个盒子各自独占一行，但是给.box1设置浮动之后，运行结果如下：
在这里插入图片描述
可以看到.box1设置浮动后原来的位置不再保留，.box元素涌上来了