浮动float和display

最新推荐文章于 2022-06-27 07:34:35 发布

康立志

最新推荐文章于 2022-06-27 07:34:35 发布

阅读量683

点赞数

分类专栏： web基础复习（HTML+CSS+JS基础）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_44011306/article/details/106976919

版权

浮动float和display

浮动样式 float
float 浮动实际应用场景：
clear 清除浮动：
float 浮动副作用-塌陷父元素：
display 设置元素框类型

浮动样式 float

浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，使用浮动的元素会默认转换为块儿级。

css 浮动示例

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
在这里插入图片描述

常规浮动效果1

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失：
在这里插入图片描述

常规浮动效果2

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框：
在这里插入图片描述

常规浮动效

最低0.47元/天解锁文章

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浮动float和display

浮动float和display浮动样式 floatcss 浮动示例常规浮动效果1常规浮动效果2常规浮动效果3常规浮动效果4float 浮动实际应用场景：clear 清除浮动：float 浮动副作用-塌陷父元素：display 设置元素框类型浮动样式 float浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，使用浮动的元素会默认转换为块儿级。css 浮动示例当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：常规浮动效果1当框 1
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。