关于浮动，原本是用于方便文字围绕图片。但后来发现它在布局发挥的作用更大
浮动元素对布局的影响
把一个元素设置成浮动元素，无论它是什么元素，浮动元素会变成块级元素，它会从文档的正常流删除，还会影响布局。
首先来看浮动元素后面跟随着行内元素
一个浮动元素，一个行内元素
<div class="parent">
<div class="float-div">浮动元素</div>
<span>浮动元素后面跟随的行内元素span</span>
</div>
我们把行内元素的左外边距设置成 -30px
<style>
.float-div{
float:left;
width:100px;
height: 100px;
background-color: orange;
}
span{
margin-left: -30px;
background-color: red;
}
</style>
效果如下：
image.png
我们可以得出结论，浮动元素和后面跟随的行内元素如果发生覆盖的话，行内元素会覆盖浮动元素。
相反，如果后面跟随的是块级元素跟浮动元素发生覆盖的话，浮动元素会覆盖块级元素，但不会覆盖内容。
代码：
<div class="parent">
<div class="float-div">浮动元素</div>
<div class="div">浮动元素后面跟随的块级元素div</div>
<span>浮动元素后面跟随的行内元素span</span>
</div>
<style>
.float-div{
float:left;
width:100px;
height: 100px;
margin: 20px 0 0 20px;
background-color: orange;
}
.div{
height: 100px;
width: 200px;
background-color: blue;
}
span{
margin-left: -30px;
background-color: red;
}
</style>
效果：
image.png
这就是浮动元素和行内元素跟块级元素相互覆盖时的不同
了解过盒子模型的都知道，当两个元素在垂直方向都有外边距的时候，会发生重合，大的覆盖小的。
我们来看一个例子
第一个div的下外边距为 70px,第二个div的上外边距为50.
<div class="div1"></div>
<div class="div2"></div>
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
}
.div1{
margin-bottom: 70px;
}
.div2{
margin-top: 50px;
}
</style>
效果
image.png
我们把第二个元素设置成浮动后，看看效果
.div2{
float: left;
margin-top: 50px;
}
image.png
第二个元素浮动后的外边距就不会跟第一个重叠了
css 权威指南上这么说：
浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的低端下面。
撑起父元素高度
当父元素中的子元素都浮动后，父元素里面没有任何内容撑起高度的话，高度就会为0.
通常需要父元素也要有高度的话，可以用以下的方法
1.父元素也设置成浮动元素
2.给父元素添加一个子元素<div></div> ,然后为这个子元素添加style：clear:both;
