3分钟带你了解float的用法

最新推荐文章于 2024-08-19 08:13:02 发布

fairy_tale_cat

最新推荐文章于 2024-08-19 08:13:02 发布

阅读量7.1k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/fairy_tale_cat/article/details/114828431

版权

标题float的用法（浮动流）

浮动流

浮动的概念：
1.元素浮动起来之后会脱离文档流，不再占有之前的空间，其他没有浮动的元素会上前补位
2.浮动元素会停靠在父元素的左右或者右边，或者停靠在已经浮动元素的边缘上。
3.浮动元素只会在当前行浮动。
4.浮动元素依然位于父元素之内。

一、浮动引发的特殊效果

1.举例说明,如图：

在这里插入图片描述

二、使用方法

1.让所有小方块浮动

在这里插入图片描述

得到结果为，小方块变为横排显示，失去div独占一行的效果


## 2.只让第一个小方块浮动
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210315132308700.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhaXJ5X3RhbGVfY2F0,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210315132337506.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhaXJ5X3RhbGVfY2F0,size_16,color_FFFFFF,t_70)

得到结果为黑色小方块消失（在黄色小方块下面），蓝色小方块代替黑色小方块下面

## 3.若黑色小方块里有绿色小方块，让黄色绿色浮动，蓝色小方块删除
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210315143650243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhaXJ5X3RhbGVfY2F0,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210315145414502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhaXJ5X3RhbGVfY2F0,size_16,color_FFFFFF,t_70)

得出结论：绿色会依附在黄色小方块旁边





## 总结  浮动引发的特殊效果
1.父元素的宽度不够时，最后一个元素会自动换行。
2.元素一旦浮动起来，会变成块级元素。
3.margin auto 会失效。
4.文本行内元素和行内块元素，采用文字环绕的方式进行排列，是不会被浮动元素压在底下。