CSS核心属性-浮动属性

最新推荐文章于 2025-05-17 16:31:55 发布

原创最新推荐文章于 2025-05-17 16:31:55 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

30 篇文章

订阅专栏

本文深入探讨了CSS中的浮动(float)属性及其对网页布局的影响，包括元素如何浮动、占据空间以及环绕文本的特性。同时，文章详细讲解了clear属性的作用，即防止元素两侧出现浮动元素，以及如何解决由浮动引起的高度塌陷问题。通过具体实例，读者可以更好地理解并掌握这些关键概念。

float:定义网页中其他文本如何环绕该元素
语法：{float：left/right/none；}
说明：
left：元素活动浮动在文本左面
right：元素浮动在右面
none：默认值，不浮动

特点：
1.DIV块元素失去“块状”换行显示特征，变为行内元素
2.紧贴上一个浮动元素（同方向）或父级元素得边框。如宽度不够将换行显示
3.占据行内元素的空间，导致行内元素围绕显示

例：
<!DOCTYPE html>
<htm>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box1 {width: 100px; height: 100px; background: #ff0000;float: left;}
        .box2 {width: 200px; height: 200px; background: #ff00ff;float: left;}
        .box3 {width: 300px; height: 300px; background: #00ff00;float: left;}
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</htm>

clear：规定元素的哪一侧不允许其他浮动元素
属性值：
none：默认值。允许浮动元素出现在两侧
both：在左右两侧均不允许浮动元素
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素

解决高度塌陷
1.给父元素添加声明：overflow：hidden
2.在浮动元素下方添加空div，并给元素添加声明：clear：both；height：0；overflow：hidden（或font-size：0；）

例：
<!DOCTYPE html>
<htm>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box {width: 960px; border: 5px #000 solid;/*overflow: hidden;*/}
        .box1 {width: 460px;height: 460px; background: #00f;float: left;}
        .box2 ,.box3 {width: 240px; height: 240px;float: left;}
        .box2 {background: #f00;}
        .box3 {background: #fbfbfb url(xiyou.png) no-repeat right bottom;}
        .clean {clear: both;height: 0;/*font-size: 0;*/overflow: hidden;}
        </style>
    </head>
    <body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="clean"></div>
    </div>
    </body>
</htm>