PC布局-浮动布局

程序员微木

于 2024-05-20 21:08:03 发布

阅读量266

点赞数 6

文章标签： css css3 html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_67896626/article/details/139074704

版权

一：浮动是什么

什么是浮动
1. 用于创建浮动框，将设置浮动元素移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框边缘。

    <style>
        .box1{
            width: 500px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .box2{
            width: 500px;
            height: 200px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

浮动解释：

即两个设置了浮动的盒子会紧密连接在一起上面例子，因为都设置了float：left
其他形式浮动：设置了浮动的盒子触及了“浏览器”/父级元素边缘（包含块）

浮动语法：
1. ```
float:left/right/none
```

二：浮动特点

脱离标准流
具有行内块元素的特性，因此会在一行内显示，并且会紧密挨着没有空隙
1. 行内块元素的特性，可给元素设置宽高，但元素不单独占据一行
2. 块元素，如果不设置宽度，默认和父级元素一样宽；但是设置了浮动，则根据元素内容设置宽度

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。