【零基础入门前端系列】—浮动（十八）-阿里云开发者社区

【零基础入门前端系列】—浮动（十八）

2023-12-04 26

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【零基础入门前端系列】—浮动（十八）

一、浮动的定义

float属性定义元素在哪个方向，以往这个属性总应用于图像，使得文本围绕在图像的周围，不过在CSS中，任何元素都可以浮动，浮动的元素会生成一个块级框，而不论它本身是何种元素。

CSS的浮动使得元素脱离文档流，文档流是文档中可以显示对象在排列时所占用的位置，而脱离文档流就是在页面中不占位置了。

二、浮动的原理

浮动后排除到普通的文档流之外
浮动后在页面不占据位置
浮动后碰到父元素的边框或者浮动的元素就会停止
浮动不会重叠
浮动只有左右浮动
浮动之后所有的元素转为块级元素

<style>
        .box {
            background-color: skyblue;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: rgb(0, 183, 255);
            float: left;
        }
        .box3 {
            width: 300px;
            height: 300px;
            float: left;
            background-color: rgb(255, 0, 247);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>