清除浮動

float

float 浮動

• 一旦元素浮動，就不會佔據默認的margin區域，好比div
• 浮動元素後方，不要直接跟隨非浮動元素
• 浮動元素相互之間，才能產生排版影響
• 浮動元素，沒法正常的撐開父容器

float left 從左到右排列，相似inline-block
float right 從右到左排列，區別於inline-block，元素順序會變化

清除浮動

只要用到了float，必須清除float

緣由：一旦元素float了，就不能佔據原來的物理空間，會致使父容器沒法正常撐開。可是某些場合，父容器不能給固定高度

1. 父容器overflow:auto

    由於偶爾須要overflow作其它用途，因此該方法不適用

2. (2)空div clear:both

    在浮動元素的最後方，增長，並列的空div

3. (1)利用父容器::after，模仿方法2

    最佳方案

若是不須要兼容IE9如下瀏覽器，推薦方案3 ::after方法
反之，用空div

最佳方案初始化 init

能夠在css初始化中寫上下面這段，而後在HTML中給須要的標籤加上clear-float類名，或者less中直接嵌套到須要的位置

css

.clear-float::after,.clear-float:after{
    content:"";
    display:block;
    clear:both;
}

less

.clear-float{
    &::after,&:after{
        content:"";
        overfloat:hidden;
        clear:both;
    }
}