css如何清除浮动影响

我们知道，在很多时候我们都会使用到浮动，比如做导航条时，或者做布局时。但是浮动又会影响到其他元素，所以我们在使用了浮动后，为了不影响其他内容，往往都会清除浮动对其他元素的影响，下面我们来详细看看

进行浮动后

1、浮动代码如下,让第一个spn元素左浮动，让第二个span元素右浮动div span:nth-child(1){float: left;}div span:nth-child(2){float: right;}效果图如下：

2、问题二： 不仅如此，如果我们在浮动元素的后面添加了内容后，由于前面的元素浮动了，所以后面的元素将自动到前面来，如下图所示

浮动的解决方案

1、方案一： 解决兄弟元素浮动对当前元素造成的影响实现： 给当前元素设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响下面为了效果更直观点，我把button代码换为了section(块级元素)section{clear: both;}