float元素的影响—深入

1.对父元素
脱离正常文档流，父元素感知不到浮动元素的存在，会造成高度塌陷。
2.对非浮动兄弟元素
2.1.对非浮动块级兄弟元素
2.1.1.浮动元素在非浮动块级元素前面
代码：

<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="fl node">
    <div class="fl-son"></div>
</div>
<div class="sibling1"></div>

兄弟元素占据浮动元素的位置，并被浮动元素覆盖，层级不能改变。
2.1.2.浮动元素在非浮动块级元素后面
另起一行，其他同上
2.2.对非浮动inline级兄弟元素
2.2.1.浮动元素在非浮动inline级兄弟元素前面

<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="container">
    <div class="fl node">
        <div class="fl-son"></div>
    </div>
    <span class=" sibling1">
        测试段落
    </span>
</div>
一行，文字环绕float元素.不被覆盖
2.2.2.浮动元素在非浮动inline级兄弟元素后面
1
<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="container">    
    <span class=" sibling1">
        测试段落
    </span>
    <div class="fl node">
        <div class="fl-son"></div>
    </div>
</div>

怪异：非浮动元素最后一行在浮动元素后面?????
3.对浮动兄弟元素
3.1.对浮动块级兄弟元素
3.1.1.浮动元素在浮动块级兄弟元素前面
代码：

<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="fl node">
    <div class="fl-son"></div>
</div>
<div class="fl sibling1"></div>

相邻排列，互不覆盖
3.1.2.浮动元素在浮动块级兄弟元素后面
相邻排列，互不覆盖
3.2.对非浮动inline级兄弟元素
3.2.1.浮动元素在浮动inline级兄弟元素前面

<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="container">
    <div class="fl node">
        <div class="fl-son"></div>
    </div>
    <span class="fl sibling1">
        测试段落
    </span>
</div>
相邻排列，互不覆盖
3.2.2.浮动元素在浮动inline级兄弟元素后面
1
<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="container">    
    <div class="fl node">
        <div class="fl-son"></div>
    </div>
    <span class="fl sibling1">
        测试段落
    </span>
</div>

相邻排列，互不覆盖
总结：
1.元素被视作块级元素，相当于display设置为“block”；
2.元素具备包裹性，会根据它所包含的元素实现宽度、高度自适应；
3.浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素；
4.浮动元素前后的行内元素环绕浮动元素排列；
5.浮动元素之前的元素如果也是浮动元素，且方向相同，它会紧跟在它们后面；父元素宽度不够，换行展示；
6.浮动元素之间的水平间距不会重叠；
7.当包含元素中只有浮动元素时，包含元素将会高度塌陷；
8.浮动元素的父元素的非浮动兄弟元素，忽视浮动元素存在，覆盖浮动元素；
9.浮动元素的父元素的浮动兄弟元素，会跟随浮动元素布局，仿佛处在同一父元素中。
参考文章：
回归CSS标准之Float