为什么例子中的<div class="clear"><div>能够把容器的高度撑起来？

你好同学 , 你可以这样理解 , 如果<div class="clear"></div>没有设置clear：both . 它上面的三个盒子也没有浮动的情况下 ,<div class="clear"></div>是应该在最后面的 ,

但是由于三个小盒子设置了浮动 . 所以<div class="clear"></div>受到浮动元素脱离文档流的影响 , 它的位置就移动上去了 , 如下:

当你设置了clear：both  ,这个时候<div class="clear"></div>就能清除浮动元素对它的影响 . 移动到下面来了 , 如下:

这个时候container容器因为<div class="clear"></div>移动到下边 ,就能重新计算高度 , 所以高度就被撑起来了 . 如果还是不理解的话 ,可以给<div class="clear"></div>设置高度理解一下:

上面借助给div.clear清除浮动 ,让它回到最下面的位置 , 这样父元素由于div.clear位置的变化 ,高度也跟着撑开 . 这种方式我们通常就是叫做清除子元素浮动对父容器带来的影响 .

因为浮动的知识相对来说难理解一些 , 其实这里同学只要会运用这些方法即可 . 原理的知识以后慢慢练习的时候 , 运用的熟练了 . 可能理解起来就相对容易了 .加油 !

祝学习愉快 ,望采纳 .