为什么我这第三个没有设置浮动，还没有吧第一个和第二个图片覆盖掉
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<title>hh</title>
<meta charest="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.a{
float:left;
}
.b{float:left;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div>
<div class="a">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="b">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="c">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，给类名是c的div设置一个背景颜色，来查看被覆盖的效果，如下：
效果：
可以看到，红色的背景是在三张图片的底层，但是红色只是第三个div的背景颜色。
第一个div，和第二个div，都覆盖在了第三个div上，但是因为前两个div里面包含图片和文字（存在内容）所以div3块里面的内容在他们后面显示了。
参考效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.aa1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.aa2 {
width: 100px;
height: 100px;
background: pink;
float: left;
}
.aa3 {
width: 300px;
height: 400px;
background: skyblue;
}
</style>
</head>
<body>
<div class="aa1">1</div>
<div class="aa2">2</div>
<div class="aa3">3</div>
</body>
</html>效果：
元素设置了浮动，脱离的文档流，但是内容没有脱离文本流，内容还在占据位置，所以文字“3”在前两个块内容后面显示。
可以试一试哦。
如果帮助到了你，欢迎采纳。
祝学愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星