css浮动详解（day06）

mc.byte

已于 2022-07-23 20:39:34 修改

阅读量114

点赞数

分类专栏： web前端 # 笔记文章标签： css css3 html

于 2022-07-23 20:37:09 首次发布

本文链接：https://blog.csdn.net/m0_58044090/article/details/125949548

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

浮动：早期作用：图文环绕

现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右

左浮动：float:left 右浮动：float:right

浮动特点：

1.浮动元素脱离标准流,(在标准流中不占位置)

2.浮动元素比标准流高半个层级，会遮住标准流元素

（高半个层级的意思：文字还是会顺标准流排在后面）

<style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: teal;
            /*float: left;*/
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /*float: left;*/
        }
</style>
<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
    <span class="box4">span 行内盒子</span>
</body>

效果图：（可以看到盒子1浮动后脱离标准流，不占位置。但盒子2文字还是挨着在它后面所以说：浮动元素比标准流高半个层级）

3.后面的元素浮动会和上一个浮动元素紧密相邻

4.浮动元素具备了行内块元素的所有显示特点

4-1：一行可以排列多个

4-2：可以设置宽高

代码详解：

<head>
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: teal;
            float: left;
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            float: left;
        }
        .box4   {
            width: 500px;
            height: 500px;
            background-color: rgb(0, 215, 0);
            float: left;

        }
    </style>
</head>

<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
    <span class="box4">span 行内盒子</span>
</body>

</html>

效果图：