浮动的作用就是为了脱离文档流，不再占据原来的位置。元素无法感知到浮动元素的存在；但是，浮动的元素之间是可以互相感知的。
浮动对于文字的影响和对于普通块级元素的影响不同。
- 两个浮动元素之间，会紧挨着；并且浮动后，块级元素不再占据一行，只再占据自身的宽度。
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: green;
}
.first{
float: left;
}
.twice{
float: left;
}
</style>
<div>1</div>
<div>2</div>
另外，需要注意的是，渲染顺序还是按照 html 文本顺序，从上至下。即
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: green;
}
.first{
float: left;
}
.twice{
float: right;
}
.third{
float: right;
}
</style>
<div class="first">1</div>
<div class="twice">2</div>
<div class="third">3</div>
- 浮动元素和文字之间。文字会包围浮动元素，但是浮动元素会遮挡背景。
<style>
div{
width: 100px;
height: 100px;
border: 1px solid green;
background-color: rgba(0,0,255,0.5);
float: left;
}
p{
word-wrap: break-word;
background-color: red;
}
</style>
<div>2</div>
<p>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</p>
