div+css中的一个float浮动问题！
<html><head><title>无标题文档</title><styletype="text/css">body{background:green;margin:0}...
<html>
<head>
<title>无标题文档</title>
<style type="text/css">
body{ background:green; margin:0}
#left{ width:600px; height:700px; float:left} 为什么这个不写float:left，那么最后个区块黄色的在右下？
#one{
float:left;
width:200px;
height:200px;
background:red;
}
#two{ float:right;
width:200px;
height:200px;
background:#0066CC;
}
#three{
width:200px;
height:200px;
float:right;
background:yellow;
}
</style>
</head>
<body>
<div id="left">
<div id="one">
</div>
<div id="two"></div>
</div>
<div id="three"></div>
</body>
</html> 展开
<head>
<title>无标题文档</title>
<style type="text/css">
body{ background:green; margin:0}
#left{ width:600px; height:700px; float:left} 为什么这个不写float:left，那么最后个区块黄色的在右下？
#one{
float:left;
width:200px;
height:200px;
background:red;
}
#two{ float:right;
width:200px;
height:200px;
background:#0066CC;
}
#three{
width:200px;
height:200px;
float:right;
background:yellow;
}
</style>
</head>
<body>
<div id="left">
<div id="one">
</div>
<div id="two"></div>
</div>
<div id="three"></div>
</body>
</html> 展开
展开全部
因为 div 是块级元素， 不浮动的话要单独占一行；后面的元素就要从下一行开始；
left 不定义 float:left 的时候，其实黄色那个块只是在left层下面一行，看起来在右下角是因为：
1、left 定义了700像素高，你可以 #left{ width:600px; height:700px; float:left; border:1px solid red;} 就可以看到 left 的边框；
2、黄色的块定义了 float:right; 在右侧浮动。
left 不定义 float:left 的时候，其实黄色那个块只是在left层下面一行，看起来在右下角是因为：
1、left 定义了700像素高，你可以 #left{ width:600px; height:700px; float:left; border:1px solid red;} 就可以看到 left 的边框；
2、黄色的块定义了 float:right; 在右侧浮动。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
