float的正确理解方式

参考资料：http://blog.sina.com.cn/s/blog_709475a10100wkdj.html

几点常识：

常见的块级元素：h1~h6、p、div、ul、table
块级元素独占一行，可以设置宽高以及边距

常见的行内元素：span、a、input、select
行内元素不会独占一行，设置宽高行距等不会起效。

一 浮动元素会自动变块级元素

<div style="height: 200px; width: 200px;"> 
    <span style="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px; 
    border: solid 1px red; background-color: Olive;">浮动元素span</span> 
</div> 

<div style="height: 200px; width: 200px;"> 
    <span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red; 
    background-color: Olive;">浮动元素span</span> 
</div> 

二 浮动元素后的非浮动元素问题

浮动元素后面的块级元素（非浮动）会在浮动元素的下面显示；
浮动元素后面的行内级元素（非浮动）会在浮动元素的上面显示；

    <div style="width: 600px; height: 500px; border: solid 1px #000000; background-color: #C7EEFF;">
    <div style="
    float: left;
    width: 250px;
    height: 250px;
    border: solid 1px Aqua;
    background-color: #03A9F4;
    margin: 10px 0 0 10px;
    ">
    浮动DIV</div>
    <div style="background-color: #1491C9; border: solid 1px green; width: 300px; height: 150px;">
    跟在浮动元素后边的DIV</div>
    <span style="background-color: #E3EDF2; border: solid 1px green; /* margin: 0 0 0 -50px; */">
    跟在浮动元素后边的span</span>
    </div>

三 多个并列同方向浮动元素高度不一致问题

多个同方向浮动元素若是高度不一致的话，很可能会得到意外的效果，跟你想要的布局差别很大。
多个同方向浮动元素一般是按照流式布局，一行满了则自动换行，也就是类似于以下效果：

四 子元素全为浮动元素高度自适应问题

由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。解决此问题最常用的办法由两种：

1.添加隐藏的div

<div style="clear:both;height:0px;"></div> 

2.:after伪类

.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix{zoom: 1;}
*:first-child + html .clearfix{zoom: 1;}
</style>
<div class="clearfix" style="border: 2px solid red;">
<div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
TEST DIV</div>
</div>

五 :after content的结合

参考资料

content

content是用来生成内容的。

h2:before {
   content: "我是额外文字！";
}
<h2>我是标题</h2>

六 :after伪类+content 清除浮动的影响

    <style type="text/css">
        .box{padding:10px; background:gray;}
        .fix{*zoom:1;}
        .fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
        .l{float:left;}
    </style>

    <div class="box fix">
        <img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    </div>