前端开发基础之CSS选择器——浮动

最新推荐文章于 2024-08-24 21:11:33 发布

jinling218

最新推荐文章于 2024-08-24 21:11:33 发布

阅读量1.7k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_52626489/article/details/124561782

版权

本文介绍了CSS选择器中的浮动特性，详细讲解了浮动的作用，包括早期的图文环绕和现在的水平布局应用。通过设置`float`属性为`left`或`right`实现元素浮动。浮动元素会脱离标准流，并按照顺序进行水平排列。同时，浮动元素会影响周围元素的布局，如需调整，可通过`display:inline-block`等方法。文章还提到了浮动元素的显示效果和文本居中问题。

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

浮动的作用

早期：图文环绕
现在：让垂直布局的盒子变成水平布局

浮动的代码

属性名：float
左浮动：float: left;
右浮动：float: right;
代码如下：

    <style>
        .left {
     
            width: 100px;
            height: 100px;
            background-color: red;
            /* 设置左浮动 */
            float: left;
        }
        .right {
     
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 设置右浮动 */
            float: right;
        }
    </style>