为什么给div1设置了float:left 之后，div2 中的栏目2 还是下下面一排没有跟着框一起上去-慕课网

为什么给div1设置了float:left 之后，div2 中的栏目2 还是下下面一排没有跟着框一起上去

来源：13-4 起飞咯 - 浮动模型

范爷

2016-04-10 14:02

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
   border:2px red solid;
    width:200px;
    height:400px;

}
#div1{
    float:left;
}
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>

写回答关注

7回答

_AI风逝云栖_

2016-04-29 17:34:33

因为你两个DIV的宽度加上border的宽度超过了浏览器的宽度，所以他上下显示，你试试把DIV的宽度调小，然后设置float就OK了

0 1
慕客学渣会总瓢把子3201537

2016-04-21 16:51:39

我觉得是超过了容器的宽度，你把宽度设置变小就可以浮动了。不知道对不对？

0 0
忆_卿

2016-04-21 10:38:07

因为你是给dvi1 设置成左浮动。但是dvi2没有啊，块状元素是独占一行的，任何元素在默认情况下是不能浮动的，所以它两根本不能并排在一起，一个是左浮动，一个是独占一行。怎么并排？

0 0
qq_木木呆呆的_03153304

2016-04-10 14:25:50

#div1{
float:left;
}
#div2{
float: left;
}

1 0

范爷

不懂原因

2016-04-10 23:40:26

共 1 条回复 >
qq_木木呆呆的_03153304

2016-04-10 14:23:54

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
border:2px red solid;
width:200px;
height:400px;

}
#div1{
float:left;
position: absolute;
}
#div2{
position: relative;
bottom: 0px;
}
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>

0 0
学学学学学学i

2016-04-10 14:16:58

你只给div1设置了左浮动，div2并没有设置浮动它肯定就上不来呀，你在给div2加个左浮动就肯定没问题了

2 0

学学学学学学... 回复范爷

div2是上去了只不过在div1的上面覆盖着的，你可以用审查元素看下，因为设置了浮动div1就已经脱离标准流了你可以给div2设置一个 clear:both;清除浮动这样它就不会覆盖上去但是它还是不可以跟上面的并排。

2016-04-11 15:56:24

共 2 条回复 >
LeoLiyu

2016-04-10 14:16:30

Add 'float:left;' to div2

1 0

范爷

可以解释一下原因么

2016-04-10 23:40:00

共 1 条回复 >