概述

在我们平时布局的时候，一般都是选择浮动布局和Flex布局。如果项目需要支持IE8，那么推荐选择浮动布局，如果不需要支持IE8，那么尽量选择Flex布局，当我们不需要支持IE8的时候，那么我们就能使用很多高级的语法，例如：计算值（）

原则

  1. 写不要死width状语从句：height
  2. 尽量选择flex，calc
  3. 如果是IE，那么上述两点全部推翻，能写死就写死

浮布局

  1. 子元素：float: left | right
  2. 父元素：添加clearfix类 
    1 
    2 
    3 
    4 
    5
    		 
    clearfix :: after { 
        content：''; 
        显示：块; 
        明确：两者; 
    }

Flex布局

在CSS最佳实践+套路（六） - flex一文中已经详细介绍了关于FLex的相关属性.Flex布局主要是

  1. 父元素：display: flex;+弹性容器相关属性
  2. 子元素：弹性项目相关属性

最佳实践和套路

实现这种布局
布局
每个模块都是一样的，四个模块占据一行，中间有边际，四个模块占据的宽度是一定的。

  1. float + margin负值法
    HTML：

    1 
    2 
    3 
    4 
    5 
    6 
    7
    		 
    <div class =“container”> 
        <div class =“inner”> 
            <ol class =“clearfix”> 
                li * 10 
            </ ol> 
        </ div> 
    </ div>

    CSS：

    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16
    		 
    .container { 
        width：960px; 
        保证金：0汽车; 
    } 
    .clearfix { 
        content：''; 
        显示：块; 
        明确：两者; 
    } 
    .inner { 
        margin：0  - 间距/ 2px; 
    } 
    li { 
        width：
        float：left; 
    }

  2. flex + margin负值法
    HTML：

    1 
    2 
    3 
    4 
    5 
    6 
    7
    		 
    <div class =“container”> 
        <div class =“inner”> 
            <ol> 
                li * 10 
            </ ol> 
        </ div> 
    </ div>

    CSS：

    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9
    		 
    .container { 
        width：960px; 
        保证金：0汽车; 
    } 
    ol { 
        display：flex; 
        证明内容：空间之间; 
        margin：0  - 间距/ 2px; 
    }

  3. flex + calc 
    HTML：

    1 
    2 
    3 
    4 
    5 
    6 
    7
    		 
    <div class =“container”> 
        <div class =“inner”> 
            <ol> 
                li * 10 
            </ ol> 
        </ div> 
    </ div>

    CSS：

    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11
    		 
    .container { 
        width：960px; 
        保证金：0汽车; 
    } 
    ol { 
        display：flex; 
        证明内容：空间之间; 
    } 
    li { 
        calc（25％ -  8px）// 20％*父元素宽度 -  8px 
    }