关于float浮动及塌陷问题

最新推荐文章于 2024-08-20 18:04:12 发布

加勒比海带62

最新推荐文章于 2024-08-20 18:04:12 发布

阅读量45

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_65033337/article/details/132275448

版权

浮动是css中很重要的一个属性，一般用于图文环绕网络布局等。
一.语法

float:left 向左浮动
float:right 向右浮动
float:none 默认值，不浮动
二.浮动的效果
1.代码（未使用浮动）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    /* .a{
        width: 400px;
        height: .400px;
        background-color: #000;
    } */
    .b{
        width: 200px;
        height: 200px;
        background-color: aqua;
        float: left;
    }
    .c{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        float: left;
    }
</style> </head> <body>
<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div> </body> </html>

运行效果

这是没有使用浮动的效果，类名为b,c的div块各占一行

2.代码（使用浮动）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    /* .a{
        width: 400px;
        height: .400px;
        background-color: #000;
    } */
    .b{
        width: 200px;
        height: 200px;
        background-color: aqua;
        float: left;
    }
    .c{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        float: left;
    }
</style> </head> <body>
<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div> 
</body>
 </html>

运行效果
在这里插入图片描述
两次对比可以发现，使用浮动之后，子类b,c不再遵从div的标准，而是c浮动元素在b浮动的右边浮动

三.浮动的特点

浮动元素会脱离标准流，在标准流中不占位置
浮动元素比标准流元素级别高，可以覆盖标准流中的元素
浮动元素具有特殊的显示效果，一行可以显示多个，同样可以设置宽高
浮动寻找浮动，下一个浮动的元素会在上一个浮动的元素后面左右浮动

四.清除浮动

在父元素内容最后添加一个块级元素，给其设置clear:both;
直接设置父级高度；
用伪元素代替额外标签
.clearfix:before,
.clearfix::after{
content: “”;
display: table;
}
.clearfix:after{
clear: both;
}
直接给父元素设置overflow:hidden;

五.注意使用float的时候，容易出现塌陷现象
原因：在浮动中，父元素的高度默认由子元素撑开，但是若子元素浮动，就会脱离标准流，没有办法撑起父元素，父元素下的元素就会自动上移，影响页面布局。
下面是具体演示：
在这里插入图片描述
这是没有使用浮动之前的效果，我并没有设置父级高度，在运行之后，父级的高度默认是两个子元素的高度和。

这是加了浮动之后的效果，两个子元素脱离了标准流，不再按照原本块级元素的规则排列，同时也并没有撑开父元素，加上我并没有给父元素设置高度，所以这里的父元素没有高度。

加勒比海带62

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于float浮动及塌陷问题

这是加了浮动之后的效果，两个子元素脱离了标准流，不再按照原本块级元素的规则排列，同时也并没有撑开父元素，加上我并没有给父元素设置高度，所以这里的父元素没有高度。原因：在浮动中，父元素的高度默认由子元素撑开，但是若子元素浮动，就会脱离标准流，没有办法撑起父元素，父元素下的元素就会自动上移，影响页面布局。这是没有使用浮动之前的效果，我并没有设置父级高度，在运行之后，父级的高度默认是两个子元素的高度和。两次对比可以发现，使用浮动之后，子类b,c不再遵从div的标准，而是c浮动元素在b浮动的右边浮动。
复制链接

扫一扫