css如何清除浮动影响？

1、先看下没有浮动时的情况，基本代码如下：

<div style="border:1px solid red;">

   <span>span1</span></span>

  <span>span2</span>

</div>

<style>

   div span{

     background-color: rgb(97, 97, 155);

     font-size: 30px;

  }

</style>

效果如图所示：

1、浮动代码如下,让第一个spn元素左浮动，让第二个span元素右浮动

div span:nth-child(1){

float: left;

}

div span:nth-child(2){

float: right;

}

效果图如下：

1、问题一：

    从刚才的效果图我们可以看出，当一个元素的所有子元素全部浮动后，其父元素的高度将会变成0，即上图的红线框没有把span元素包裹的原因。

2、问题二：

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

1、方案一：  解决兄弟元素浮动对当前元素造成的影响

实现： 给当前元素设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响

下面为了效果更直观点，我把button代码换为了section(块级元素)

section{

clear: both;

}

2、方案二：  解决子元素浮动对父元素造成的影响

实现： 在最后一个子元素的后面再添加一个块级子元素div，然后内容为空，同时设置clear属性

<div style="border:1px solid red;">

<span>span1</span></span>

<span>span2</span>

   <div></div>

</div>

<style>

div div{

     clear: both;

}

</style>