HTML5+CSS——浮动

最新推荐文章于 2023-03-21 21:06:03 发布

「已注销」

最新推荐文章于 2023-03-21 21:06:03 发布

阅读量454

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/m0_51683943/article/details/119560106

版权

浮动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动（兼容性最好，浮动很重要）
定位

应用场景

文字环绕
横向排列（如淘宝页面、百度等的横向排列）

浮动的基本特点

修改float属性值为：

left：左浮动，元素靠上靠左
right：右浮动，元素靠上靠右

浮动的优先级是：靠上、靠左、靠右

默认值为：none，不浮动，即是常规流

当一个元素浮动后，元素必定为块盒(更改display属性为block)

对比是否加float属性的不同之处

不加float属性：

<!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>
        span{
     
            border: 3px solid #ac8530;
        }
    </style>
</head>
<body>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium laborum dolorem, ratione deleniti consequuntur minus ad reprehenderit quos similique earum id. Similique facere sapiente voluptatibus incidunt alias laborum aspernatur eveniet?</span>
    <span>Lorem, ipsum dolor.</span>
</body>
</html>

运行结果检查：

在这里插入图片描述

无float属性时，span元素是行盒元素

加float属性时：

<!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>
        span{
     
            border: 3px solid #ac8530;
            float: left;
            line-height: 2;
            margin: 5px;
        }
    </style>
</head>
<body>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium laborum dolorem, ratione deleniti consequuntur minus ad reprehenderit quos similique earum id. Similique facere sapiente voluptatibus incidunt alias laborum aspernatur eveniet?</span>
    <span>Lorem, ipsum dolor.</span>
</body>
</html>

有float属性时，元素为行盒

运行结果及检查：
在这里插入图片描述

总结：浮动后元素必为块盒，更改display属性为block；行盒和块盒（在不考虑语义的情况下）浮动显示出来的效果是一样的

浮动元素的包含块，和常规流一样，为父元素的内容盒(content-box)

<!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>
        .container{
     
            width: 500px;
            height: 500px;
            background: #008c8c;
            border: 30px solid #d18624bb;
        }

        .container div{
     
            width: 100px;
            height: 100px;
            background: seagreen;
        }

        .container .left{
     
            float: left;
        }

        .container .right{
     
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

运行结果：

在这里插入图片描述

浮动盒子尺寸

宽度为auto时，适应内容宽度，没有内容时，则为0

<!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>
        .container{
     
            width: 500px;
            height: 500px;
            background: springgreen;
            border: 25px solid #cf1140;
        }

        .container div{
     
            background: tan;
            width: auto;
            height: 100px;
        }

        .container .left{
     
            float: left;
        }

        .container .right{
     
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right">Lorem ipsum dolor sit.</div>
    </div>
</body>
</html>

运行结果：

在这里插入图片描述
2. 高度为auto时，与常规流一致，适应内容的高度

<!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>
        .container{
     
            width: 500px;
            height: 500px;
            background: springgreen;
            border: 25px solid #cf1140;
        }

        .container div{
     
            background: tan;
            width: auto;

最低0.47元/天解锁文章

「已注销」

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5+CSS——浮动

浮动视觉格式化模型，大体上将页面中盒子的排列分为三种方式：常规流浮动（兼容性最好，浮动很重要）定位应用场景文字环绕横向排列（如淘宝页面、百度等的横向排列）浮动的基本特点修改float属性值为：left：左浮动，元素靠上靠左right：右浮动，元素靠上靠右浮动的优先级是：靠上、靠左、靠右默认值为：none，不浮动，即是常规流当一个元素浮动后，元素必定为块盒(更改display属性为block)浮动元素的包含块，和常规流一样，为父元素的内容盒盒子尺寸宽度为au
复制链接

扫一扫