                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

这个出来的效果第三个div中的文字为什么不会跟着div动，且第三个div被第一个覆盖后会偏上呢

<html>

<head>

.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>

第一个box

</div>

第二个box

</div>

第三个box

</div>

</body>

</html>

结果如图：

第三个盒子的文字为什么不随着div动呢？且第三个div被第一个覆盖后会偏上呢？

枫雪轩

2017-04-07

源自：初识HTML(5)+CSS(3)-升级版 13-4

关注问题我要回答

1759

操作

收起

5 回答

ywudi 回答被采纳 +3 积分
2017-04-07

box3默认是流动模型，从页面第一行开始展开并且独占一行；box1和box2是浮动模型，浮动在页面左上角，但同时会覆盖box3的部分内容。box3为了避免其文字内容被覆盖，会把文字向右移动显示，但是受box3的宽度限制，只能写在下方，就造成了你的结果。

你把box3的宽度设置大一些，看看效果就明白了

1 回复有任何疑惑可以回复我~

收起回答

枫雪轩提问者

宽度设置大了文字还是不动，不会进入到box3中

2017-05-11 回复有任何疑惑可以回复我~

提拉米苏HR
2017-05-27

.box3{

background: red;

width: 80px;

height: 30px;

border: 10px solid ;

padding: 20px ;

margin: 20px ;

float:left;

}

你掉了一行代码。最后一行，加上就可以了

0 回复有任何疑惑可以回复我~

收起回答

qq_流川击石
2017-04-07

第一二个是浮动布局，默认为同一层级，并且没有设置具体边界，就从左上开始堆叠了。所以平铺向右不会冲突，第三个没有写明布局方式，默认为流布局。流布局的边界布局优先级高一点，直接挤在了浮动布局的前面。所以box3的边界一变，下面的两个都会变，至于文字会被覆盖，那是因为可以放置文字的空间太小溢出了，你把padding加大一点试试，文字就正常了。

1 回复有任何疑惑可以回复我~

收起回答

枫雪轩提问者

padding变大也没效果呀

2017-05-11 回复有任何疑惑可以回复我~