Home > Article > Web Front-end > [入门问题]float为什么把div上移了？_html/css_WEB-ITnose
[入门问题]float为什么把div上移了？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:41:411386browse
先上代码 第一个和第二个差一点 ，就是红色部分的代码float:left,但是两个起始的top却不一样，为什么呢？
请高手赐教！！！
通过
貌似可以消除绿边，我的问题是，为什么会有这么一个绿边，原理是什么，为什么是10px？
<!DOCTYPE html><html><head><title>untitled</title><style> #HelloDiv{ background-color: red; height:400px; width:400px; margin:50px; border:40px solid blue; padding:30px; float:left; } body{ background-color: green; }</style></head><body><div id="HelloDiv"> <p>青青园中葵 朝露待日?</p> <p>阳春布德泽 万物生光辉</p> <p>常恐秋节至 ?黄华叶衰</p> <p>百川东到海 何时复西归</p> <p>少壮不努力 老大徒伤悲</p> </div></body></html> <!DOCTYPE html><html><head><title>untitled</title><style> #HelloDiv{ background-color: red; height:400px; width:400px; margin:50px; border:40px solid blue; padding:30px; float:left; } body{ background-color: green; }</style></head><body><div id="HelloDiv"> <p>青青园中葵 朝露待日?</p> <p>阳春布德泽 万物生光辉</p> <p>常恐秋节至 ?黄华叶衰</p> <p>百川东到海 何时复西归</p> <p>少壮不努力 老大徒伤悲</p> </div></body></html> 请高手赐教！！！
回复讨论(解决方案)
我测试过了。。。
两段代码的现实情况是一模一样的。。。
ie8
是这样的 如果margin=0的话 还是有一个绿边
http://hi.csdn.net/attachment/201009/5/1343907_1283672355821B.gif
<!DOCTYPE html><html><head><title>untitled</title><style> #HelloDiv{ background-color: red; width:400px; margin:0px; border:40px solid blue; padding:30px; float:left; } body{ background-color: green; }</style></head><body><div id="HelloDiv"> <p>青青园中葵 朝露待日?</p> <p>阳春布德泽 万物生光辉</p> <p>常恐秋节至 ?黄华叶衰</p> <p>百川东到海 何时复西归</p> <p>少壮不努力 老大徒伤悲</p> </div></body></html> 通过
position:relative; top:-10px; left:-10px;
貌似可以消除绿边，我的问题是，为什么会有这么一个绿边，原理是什么，为什么是10px？
body{
background-color: green;
}
你背景颜色设置的绿色
body{
background-color: green;
}
你背景颜色设置的绿色
您好 谢谢 我想知道的是 为什么会有这个绿边 div为什么不是贴紧 top:0px;left:0px
float:top
float:top
谢谢 这样写么？还是不行啊
<!DOCTYPE html><html><head><title>untitled</title><style> #HelloDiv{ background-color: red; width:400px; margin:0px; border:40px solid blue; padding:30px; float:top left; } body{ background-color: green; }</style></head><body><div id="HelloDiv"> <p>青青园中葵 朝露待日?</p> <p>阳春布德泽 万物生光辉</p> <p>常恐秋节至 ?黄华叶衰</p> <p>百川东到海 何时复西归</p> <p>少壮不努力 老大徒伤悲</p> </div></body></html> 没发现楼主两段代码有什么不同啊，ie8、ff测试都没问题；
楼主所说的绿边，是由于浏览器默认情况下body会有一定的margin值，楼主只要在body样式里加一条margin:0px;就行了
我加了一个visible=false的div后也出现了同样的问题：凡是设置float:left的div都上移了20px，当我把visible=true后就又正常了
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：IE下自己制作选项卡菜单类中遇到的iframe缓存问题_html/css_WEB-ITnoseNext article：请高手点拨“收集注册用户注册信息页面"的所涉技术。_html/css_WEB-ITnose