目录
回复讨论(解决方案)
首页 web前端 html教程 float浮动的小问题~_html/css_WEB-ITnose

float浮动的小问题~_html/css_WEB-ITnose

Jun 21, 2016 am 09:32 AM

<div style="background:red; width:100px; height:100px; "></div><div style="background:green; width:100px; height:100px; float:left;"></div>
登录后复制


效果:


问题:
我觉得第二个div向左浮动,是应该覆盖第一个div啊?因为它已经脱离文档流了,为什么还是在第一个div下边呢?

谢谢!


回复讨论(解决方案)

设置绝对定位position: absolute;

设置绝对定位position: absolute;
这个我知道。我问的是为什么这个浮动不上去

谁能帮我解答一下啊??

浮动不是脱离文档流
你从哪看来的?
块级元素左右不能有并排的元素的,要不就设置浮动或者定位
你第一个div没有浮动,也没有定位,所以第二个浮动div自然跑下面去了

脱离文档流是绝对定位或者固定定位

float本来就不会覆盖

浮动的定义 可以参考
http://www.w3school.com.cn/css/css_positioning_floating.asp

楼上的??++++

第一个也要浮动

div是块级元素,第一个div你没有设置成float所以他会占用整个一行。第二个虽然浮动了但是他也不会占用第一个div的地方。如果你把两个反过来写的话,他们就会重叠了。

第一个div占据了一行,所以第二个的div浮动相当于从第二行开始浮动的,如果你想要你说的效果你可以把两个div的位置互换,第二个放在第一位,就会被覆盖,原理就是第一个因为是浮动,就脱离了文档流,所以第二个div出现在了第一个位置,然后第一个div会浮动过去覆盖掉第一个div 就是这样子了

第一个div占据了一行,所以第二个的div浮动相当于从第二行开始浮动的,如果你想要你说的效果你可以把两个div的位置互换,第二个放在第一位,就会被覆盖,原理就是第一个因为是浮动,就脱离了文档流,所以第二个div出现在了第一个位置,然后第一个div会浮动过去覆盖掉第 二个div 就是这样子了
不好意思 错别字了

嗯,谢谢大家的回答!




这样就出现了你说的效果。。。。。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表单验证属性来验证用户输入?

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

如何高效地在网页中为PNG图片添加描边效果?

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?

&lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;的目的是什么。 元素?

&lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;的目的是什么。 元素?

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

HTML5中跨浏览器兼容性的最佳实践是什么?

&gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

&gt; gt;的目的是什么 元素?

See all articles