CSS 清除浮动Clear

在之前的课程中，我们曾过如何通过CSS的“Float:left”属性使元素在网页上浮动起来。让我们回顾一下其中的经典案例：红色方块和蓝色方块是如何通过这一属性被安排在同一行的。为了深入理解这个概念，我们可以设想一个场景：两个盒子，一个红色一个蓝色，原本它们各自占据一行，但当我们对红色方块应用“Float:left”后，蓝色方块得以与红色方块并肩排列。如图展示，视觉效果一目了然。

当我们尝试加入一个新的元素——绿色的方块，并希望它出现在第二行时，问题出现了。即便我们设定了绿色方块的定位，它在IE浏览器中的表现总是不尽如人意，被蓝色方块“挤”到了后面。这是因为蓝色方块的CSS代码中也有“Float:left”属性。为了浏览器的兼容性，我们并不能轻易移除这一设定。那么，我们该如何解决这个问题呢？

再强调一下，这个技巧的目的是为了消除蓝色方块的浮动对绿色方块布局的影响。如果还是感到困惑，不妨试试在红色方块和蓝色方块之间也加入这个清除浮动的div，看看效果有何变化。这样或许能更好地理解这一技巧的实际应用。

至此，我们的课程告一段落。下一课，我们将学习制作一个实用的导航条。想要更好地掌握这项技能，前三课的内容一定要吃透，否则在后续的学习中可能会感到吃力。让我们期待下一课的精彩内容吧！

让我们用Cambrian的代码渲染一下这段文字：cambrian.render('body')。让页面生动起来！