浮动属性的认识

我是打工人

已于 2022-06-04 22:00:03 修改

阅读量516

点赞数 1

文章标签： html

于 2022-03-06 10:12:37 首次发布

本文链接：https://blog.csdn.net/szydqq/article/details/123306027

版权

1.浮动属性的使用:控制元素在浏览器中的位置（可以实现横向排列的效果）

属性:float 使..漂浮/使...浮动

属性值:left right none(默认值表示不浮动)

- 浮动属性只能控制元素在水平方向上移动

- 浮动属性会使当前的元素脱离文档流(网页布局) 初始位置不存在后面的元素就会补上初始的网页布局就会被破坏

2.浮动属性的停止条件

设置浮动属性的元素不会跑出当前的父级盒子碰到父级元素的边框就会停止浮动

碰到前面一个含有浮动属性的元素也会停止浮动

当子级元素的宽度大于父级元素的宽度时候最后一个浮动元素会慢慢的往下移动直至找到足够的空间

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;/* 元素设置向左浮动目前是没有效果的 */
            /* float: right; */
        }
        .box2{
            width: 200px;
            height: 50px;
            background-color: blue;
            float: left;
        }
        .box3{
            width: 450px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>