100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 关于css设置float后的div块碰撞问题【HTML】

关于css设置float后的div块碰撞问题【HTML】

时间:2023-01-14 22:06:57

相关推荐

关于css设置float后的div块碰撞问题【HTML】

web前端|html教程

css,float,碰撞,div,设置

web前端-html教程

android 学习 源码,怎么删除vscode顽固文件,ubuntu依赖关系,tomcat配置乱码,sqlite .jar,无锡优秀网页设计,mysql数据库账号,中国服务器地址,wordpress 代码编辑器插件,前端框架vuecss,商海小爬虫,amqp php,贵阳做seo的公司,springboot源码答案,wordpress分类目录标签转换器,基于 旅游网站,php网页禁止查看源文件,bootstrap布局模板,企业网站后台管理模板,html注册页面表单验证,销售管理系统前端源码下载,小程序 奖品核销lzw

* {margin:0;padding:0; } #dv1 {border: 1px solid red;width: 400px;height: 300px; } #dv2 {/*display:inline; dv3加浮动,dv2不会被挤开,是因为dv3只是停留在它那一行,没有影响到文件流,但是为什么把dv2设置成行级元素就会被下面的dv3挤开呢??*/float:left;width: 200px;height: 200px;border: 1px solid green; } #dv3 {width: 400px;height: 100px;border: 1px solid blue;/*position:absolute;*/ }

我是dv1中的文本

我是dv2中的文本

我是dv3中的文本

1、如果给dv2设置float,是不会挤动上方的div的,但是下方的div却会挤到上面来,这是为什么呢?

网站源码交易平台,怎么导入Ubuntu镜像,爬虫技术典型场景,php 管理,推广seo价格lzw

2、我老师说下面的div挤上来是因为float之后的dv2会浮到前面来,也就是不跟dv3在同一个平面了,所以留下一个空的位置,下方的dv3就顶到了这个空位上,这个说法正确吗?

志汇餐饮外卖多店铺小程序源码,win 10与ubuntu,tomcat打不开文件夹,爬虫抓取数据代码,php技术能力提升外包教程,农业seo优化lzw

3、如果是这样的话,那dv2已经浮到了前面来,那么跟dv1也不在一个平面了,为什么不会浮动到最左上角呢?都不在一个平面了为什么会被上面的dv1顶住上不去呢?

4、另外如果把dv1设置display:inline,设置为行内元素,dv2又会挤到最左上角,并且把dv1挤到右侧,按我老师的说法,既然都不在一个平面上,为什么dv1会被dv2挤开呢?

求大牛们解答,谢谢!!!

回复讨论(解决方案)

1.前面的div不影响,只是它自己浮动起来后影响后面的div。你可以看成排队,前面一个人到上一层空间去了,后面的人就可以占有她位置。

2.你老师说的对

3.因为dv1是块级元素(默认display是block)。当然dv2是飘不过去了。 block英文是障碍物的意思,很明了了吧

4.“dv1设置display:inline” 就将dv1由块级元素转变成了内联元素,内联元素是不占空间的。所以dv2就可以飘过去了。

你可以看看下面这个帖子的第6和22课。

/topics/390648164

百度一下:内联元素与块级元素的区别

具体看看/topics/390648164 这个里面的第六课

谢谢,基本明白了,问下你这个3D图是怎么弄出来的?自己画的吗?

谢谢,基本明白了,问下你这个3D图是怎么弄出来的?自己画的吗?

用cdr画的,熟悉的话很简单。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。