为什么给div.c1添加overflow:hidden后，橘色块还是被覆盖在图片下面
来源：2-11 清除浮动的常用方法
慕慕4335856
2020-03-13 09:53:05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text_around</title>
<style type="text/css">
.clear{clear:both;}
.c1{overflow: hidden;}
img{width:200px;}
.i3{
float:left;
}
.c2{
width:300px;
height:200px;
background-color: orange;
/*overflow: hidden;*/
}
</style>
</head>
<body>
<div class="c1">
<img class="i3" src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg">
<!-- <div class="clear"></div> -->
<div class="c2"></div>
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg">
</div>
</body>
</html>
2回答
-
同学你好，问题解答如下：
1.清除浮动是清除浮动元素对此元素的影响。谁受到影响了，就给谁设置清除浮动。div.c1是图片和橘色块的父元素，给div.c1设置overflow: hidden;，是为了解决子元素浮动带来的高度塌陷问题 ，这里父元素里面还有其他元素并没有脱离文档流，所以不用设置。如果想要橘色块不受前面浮动元素的影响，需要给橘色块.c2设置清除浮动。
2.区别就是overflow:hidden还有一个作用是超出隐藏。即一个元素里面的内容如果超出了，则超出的内容就会被隐藏。示例：
设置 overflow: hidden;
如果不考虑超出内容是否要隐藏，使用哪一个都行。
3.这个第一条回复讲到了，谁受到影响，就给谁清楚。给父元素清除浮动，只是清除父元素受到的影响。橘色盒子受到影响，应给橘色盒子清除浮动哦。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
慕慕4335856
提问者
2020-03-13
2.用添加空元素clear和用overflow:hidden清除浮动有什么区别
3.为什么给橘色块加了overflow:hidden后，就不会被覆盖了，不过橘色块还是和浮动图片在一行，但是给父元素c1添加overflow:hidden不能清除浮动，是为什么
0
相似问题