float的正確理解方式

參考資料：http://blog.sina.com.cn/s/blog_709475a10100wkdj.html

幾點常識：

常見的塊級元素：h1~h六、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>