float——浮动刨根问底
浮动介绍
什么叫浮动呢？浮动是元素的一个属性。当Dom元素设置了float属性后，元素会向左或者向右浮动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。设置了浮动属性的元素会脱离文档流——不占据任何文档空间，所以普通文档流中的元素表现得像浮动元素不存在一样。
下面我们用代码来对浮动的定义以及特点进行说明：
首先，我新建一个基本的文档，文档的内容是一个box盒子里面分别包含left区，content区和right区：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float definition</title>
<style>
.box{
height: 500px;
background-color: bisque;
}
.box .box-content {
background-color: blue;
width: 100%;
}
.box .box-left {
height: 200px;
background-color: green;
}
.box .box-right {
height: 200px;
background-color: pink;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
</head>
<body>
<header>
</header>
<div class="box">
<div class="box-left">
左边
</div>
<div class="box-content">
内容区
</div>
<div class="box-right">
右边
</div>
</div>
<footer>
</footer>
</body>
</html>
如图所示，整个页面分为三个部分，分别是header，box和footer，而box又分为三个区域，左边区域，内容区域和右边区域。
为了验证浮动，我们这里会使用box区域进行试验。
1、box-left添加浮动
.box .box-left {
height: 200px;
background-color: green;
float:left;
}<figure class="image">
</figure>结合上图，我们分析一下：
当box中最左边的元素box-left添加float:left属性后，它向左浮动，它的前面没有浮动元素框，因此它的边缘碰到包含框box后就停了下来。
原来的box-left元素宽度是占据一行的，现在的宽度只有它本身的可撑开宽度。
box盒子中的内容区和right区域开始向上移动，占据了原来left区域的位置，这里有个特点，left区域和内容区的盒子框占据但是文字没有占据，如果文字比较多的话，会形成环绕浮动元素的效果。
浮动元素脱离了文档流，后面的元素表现得好像浮动元素不存在一样。
2、box-right添加浮动
.box .box-right {
height: 200px;
background-color: pink;
float:left;
}
box-right添加了浮动以后，它也会开始向上和左浮动，这里有个问题是，按照浮动的定义，它前面有一个浮动框box-left,向左浮动后遇到浮动框停止，但是向上应该碰到包含框停止才对呀，可是有边的元素遇到中间的那个框以后就直接停止了，因此这里暂时记下这个问题。
总结一下：
float属性的影响就是：
