为什么会出现这种情况？
第二个div盒子虽然覆盖到了第一个盒子下面，可是盒子里面的文字仍然在下面显示？
<style type="text/css">
*{margin:0;padding:0;}
.one{float: left; background-color: orange; width: 400px;height: 400px;}
.two{background-color: purple;width: 400px;height:400px;}
</style>
<body>
<div class="one">123456</div>
<div class="two">123456</div>
</body>
</html>
如图所示
2.同理将div里面的图片换成文字也变成这样子了？
<style type="text/css">
*{margin:0;padding:0;}
.one{float: left; background-color: orange; width: 400px;height: 400px;}
.two{background-color: purple;width: 400px;height:400px;}
</style>
<body>
<div class="one"><img src="red1.jpg"></div>
<div class="two"<img src="red1.jpg"></div>
</body>
</html>
图片
3.但是如果对div不设置高度和宽度的话，直接将图片放在div盒子里面，它的展现情况就是如下了？
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.one{float: left; background-color: orange; }
.two{background-color: purple;}
</style>
</head>
<body>
<div class="one"><img src="red1.jpg"></div>
<div class="two"><img src="red1.jpg"></div>
</body>
</html>
正在回答
你好，可以这样理解：
当两个元素宽高相等时，文字应该是被遮盖住的，但是文字始终是会显示出来的，但是自身元素没有位置可以显示出来，所以就会按照文本流排列，显示在下面。
当下面的元素宽度比较大时，也就是自身元素内有位置时，才会显示在右边，自身元素内。
可以再测试理解下。
同学，你好。
问题1：文字仍然在下面显示的原因是文字会受浮动元素影响，而并不会总是完全跟随父级定位到父级的最左最上部分，它会环绕在浮动元素的周围，当这里给第一个div设置宽高200px时，文字就会环绕第一个盒子排列。如图：
这里文字在下边显示的原因是因为两个盒子的宽度一样，文字被挤压了下来。
问题二：这里的问题和问题一是一样的，图片也属于文本，也会受浮动元素的影响。
问题三：不设置宽高显示如下，是因为不设置宽高，第二个盒子也没有设置浮动，因此第二个盒子会继承body的宽度，第一个盒子设置左浮动不占据位置，它的宽高是由盒子中的图片的宽高撑开的。因此会显示图中效果。
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星