这个出来的效果第三个div中的文字为什么不会跟着div动，且第三个div被第一个覆盖后会偏上呢
<html>
<head>
<meta charset="UTF-8">
<title>盒子</title>
<style type="text/css">
.box1{
background: red;
width: 80px;
height: 30px;
border: 10px solid;
padding: 20px;
margin: 20px;
float: left;
}.box2{
background: red;
width: 80px;
height: 30px;
border: 10px solid;
padding: 20px;
margin: 20px;
float: left;
}
.box3{
background: red;
width: 80px;
height: 30px;
border: 10px solid ;
padding: 20px ;
margin: 20px ;
}
</style>
</head>
<body>
<div class="box1">
第一个box
</div>
<div class="box2">
第二个box
</div>
<div class="box3">
第三个box
</div>
</body>
</html>
结果如图：
第三个盒子的文字为什么不随着div动呢？且第三个div被第一个覆盖后会偏上呢？
个回答
-
- ywudi
- 2017-04-07 14:37:50
box3默认是流动模型，从页面第一行开始展开并且独占一行；box1和box2是浮动模型，浮动在页面左上角，但同时会覆盖box3的部分内容。box3为了避免其文字内容被覆盖，会把文字向右移动显示，但是受box3的宽度限制，只能写在下方，就造成了你的结果。
你把box3的宽度设置大一些，看看效果就明白了
-
- 提拉米苏HR
- 2017-05-27 19:59:58
.box3{
background: red;
width: 80px;
height: 30px;
border: 10px solid ;
padding: 20px ;
margin: 20px ;
float:left;
}
你掉了一行代码。最后一行，加上就可以了
-
- qq_流川击石
- 2017-04-07 11:47:18
第一二个是浮动布局，默认为同一层级，并且没有设置具体边界，就从左上开始堆叠了。所以平铺向右不会冲突，第三个没有写明布局方式，默认为流布局。流布局的边界布局优先级高一点，直接挤在了浮动布局的前面。所以box3的边界一变，下面的两个都会变，至于文字会被覆盖，那是因为可以放置文字的空间太小溢出了，你把padding加大一点试试，文字就正常了。
-
- 慕设计5567885
- 2017-04-07 11:36:35
是不是第三个div少了
float: left;
这一行代码？
-
- 日中星闪
- 2017-04-07 11:12:46
因为第三个div受到了第二个div浮动属性的影响