还没清除浮动，但是为什么下面第一张图跟着到右面去了，而不是在左边
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
width:1000px;
}
.ct{
background-color:#add8e6;
}
.ctl{
float:left;
width:50%;
}
</style>
</head>
<body>
<div class="container">
<div class="ct">
<div class="ctl"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"/></div>
<div class="ctr"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"/></div>
</div>
<div class="cb">
<div class="cb1"><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"/></div>
<div class="cb2"><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"/></div>
<div class="cb3"><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"/></div>
</div>
</div>
</body>
</html>
正在回答
同学你好，是的，给元素添加浮动后，就会影响到后面的元素，这也是为什么我们要清除浮动。在这个里面，由于ctl设置了浮动，那么后面的元素就会“围”着它进行排列，又因为图片是内联元素，底部自带默认间隙，将父容器撑大了：
ctl的高度是219px：
ctr的高度是218px：
所以后面的元素在按顺序排列的时候，由于ctl的高度较高，下面的第一张图片就被挤到了右边，我们可以给ctl的图片去除底部间隙，图片就正常排版了：
同学听不懂也没关系，这块的原理确实比较绕，同学可以先放放，等练习的多了，遇到的情况也多了，慢慢就知道怎么布局了。
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星