[入门问题]float为什么把div上移了？_html/css

[入门问题]float为什么把div上移了？_html/css_WEB-ITnose

WBOY

发布： 2016-06-21 09:41:41

原创

1386 人浏览过

本帖最后由 overmind 于 2010-09-05 12:15:48 编辑

先上代码第一个和第二个差一点，就是红色部分的代码float:left,但是两个起始的top却不一样，为什么呢？

<!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后就又正常了