CSS-浮动（float）

最新推荐文章于 2023-03-22 11:47:21 发布

想睡觉的秃鹫

最新推荐文章于 2023-03-22 11:47:21 发布

阅读量146

点赞数

分类专栏： CSS 文章标签： vscode

本文链接：https://blog.csdn.net/A201911621310/article/details/124297826

版权

本文详细介绍了CSS中的浮动特性，包括浮动元素如何脱离标准流、如何按属性值排列以及其行内块元素特性。通过实例展示了浮动如何影响盒子布局，并探讨了浮动元素与标准流父级搭配使用的常见布局策略。

摘要由CSDN通过智能技术生成

设置浮动的元素重要特性：

一、

1、脱离标准普通流的控制移动到指定位置，（俗称脱标）

2、浮动·的盒子不在保留原先的位置

代码段及效果如下：

HTML：

<div class="left">左青龙</div>
<div class="right">右白虎</div>

CSS：

        .left {
            float: right;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-left: 1px;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

效果图，两个盒子都飘在右上角