CSS浮動和清除浮動

float：left | right | none | inline-start | inline-end

• left：表明元素必須浮動在其所在的塊容器左側的關鍵字。
• right：表明元素必須浮動在其所在的塊容器右側的關鍵字。
• none：表明元素不進行浮動的關鍵字。
• inline-start：關鍵字，表明元素必須浮動在其所在塊容器的開始一側，在ltr指令碼中是左側，在rtl指令碼中是右側。
• inline-end：關鍵字，表明元素必須浮動在其所在塊容器的結束一側，在ltr指令碼中是右側，在rtl指令碼中是左側。

clear：left|right|botn

• left：元素被向下移動用於清除之前的左浮動。
• right：元素被向下移動用於清除之前的右浮動。
• both：元素被向下移動用於清除之前的左右浮動。
• none：元素不會向下移動清除之前的浮動。
• inline-start：該關鍵字表示該元素向下移動以清除其包含塊的起始側上的浮動。即在某個區域的左側浮動或右側浮動。
• inline-end：該關鍵字表示該元素向下移動以清除其包含塊的末端的浮點，即在某個區域的右側浮動或左側浮動。

特性：

• 大部分使用了float之後，將會改變一個元素的display屬性為block。
• 浮動元素脫離了正常的文件流。
• 浮動會向指定方向平移，一直平移直到碰到所處容器的邊框，或碰到另一個浮動元素停下。

另外當只為子元素設定float時而父元素沒有任何寬高值（包括border）時，這時即使父元素為block，父寬度足夠的情況下在視覺上子浮動元素會橫向排列在一起。

如：

<!-- css -->
    <style>
        .square {
            background: #fff;
            border: 1px solid #999;
            float: left;
            font-size: 24px;
            font-weight: bold;
            line-height: 34px;
            height: 34px;
            margin-right: -1px;
            margin
 
-top: -1px;
            padding: 0;
            text-align: center;
            width: 34px;
        }
    </style>
    <!-- html -->
    <div>
        <button class="square"></button>
        <button class="square"></button>
        <button class="square"></button>
    </div>
    <div>
        <button class="square"></button>
        <button class="square"></button>
        <button class="square"></button>
    </div>
    <div>
        <button class="square"></button>
        <button class="square"></button>
        <button class="square"></button>
    </div>

效果：

這時候我們如果給div加上合適的高：

div{
            height: 33px;
        }

可以看到，3個div成功看起來各佔一行。