我们知道，在很多时候我们都会使用到浮动，比如做导航条时，或者做布局时。但是浮动又会影响到其他元素，所以我们在使用了浮动后，为了不影响其他内容，往往都会清除浮动对其他元素的影响，下面我们来详细看看
工具/原料
电脑
浏览器
没有进行浮动前
1、先看下没有浮动时的情况，基本代码如下：<di箪滹埘麽v 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>
