CSS核心属性-浮动属性

最新推荐文章于 2024-04-12 22:14:56 发布

房东的喵

最新推荐文章于 2024-04-12 22:14:56 发布

阅读量128

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/luxunlx123/article/details/105844114

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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>

房东的喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS核心属性-浮动属性

float:定义网页中其他文本如何环绕该元素语法：{float：left/right/none；}说明：left：元素活动浮动在文本左面right：元素浮动在右面none：默认值，不浮动特点：1.DIV块元素失去“块状”换行显示特征，变为行内元素2.紧贴上一个浮动元素（同方向）或父级元素得边框。如宽度不够将换行显示3.占据行内元素的空间，导致行内元素围绕显示例：<!...
复制链接

扫一扫