CSS中的浮动效果可以让元素自动贴近其它的元素，使页面排版更加美观。但有时候，浮动效果会导致布局出现混乱或出现意想不到的问题。那么我们该怎样清除浮动呢？

首先，我们需要了解浮动对元素的影响。当一个元素被设为浮动时，它会脱离文档流，被移动到其容器的左侧或右侧，并向其左侧或右侧移动，直到遇到其它元素或容器边界。这就导致元素周围的空间和边距不再起作用，容易导致页面布局出现问题。

要解决这个问题，我们可以使用以下方法：

.clearfix::before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}.clearfix {*zoom: 1;}

这个方法中，使用了伪元素::before和::after来清除浮动，同时配合使用clear:both属性和zoom:1兼容IE6的hack。其中，clearfix为一个自定义的类名，可以在需要清除浮动的标签上添加清除浮动的类名。如下所示：

<div ><img src="/post/image.jpg"></div><div ><p>这是一个右浮动的块级元素</p></div>

在以上代码中，我们在向右浮动的块级元素上添加了clearfix类名，这样就可以保证这个块级元素的周围空间不会出现问题。

除此之外，还有其它方法可以清除浮动，如使用额外的空标签或使用父级元素的overflow:hidden属性。但使用::before和::after可以免去添加额外标签或产生其它潜在问题的风险，因此推荐使用这种方法。