CSS 布局

CSS 布局部分总结

首先，我发现伪类和伪元素其实在CSS3之前都是一个冒号的、CSS3为了更好区分则伪元素使用2个冒号，考虑兼容的话，两个都用单冒号。

---

布局：
是否支持IE8？
=> 是 => Float布局（定宽）
=> 否 => Flex布局（弹性布局）

原则：
1、万不得已，不写死宽高
2、尽量使用高级语法 calc、flex
3、若为IE、全写死（对IE来说，能正常显示都不错了）

---

Float布局（兼容到IE5）

1、儿子加上 float:left

  .son{
    float: left
  }

2、父亲加上 clearfix

3、不推荐在父亲加 overflow:hidden（经常会遇到BUG，涉及到BFC，结尾有说BFC）
4、在一些wrapper元素上加上min-width 防止错位
5、利用好padding、百分比去设置宽高

Float平均布局

父亲在IE6中使用

  .clearfix:after {
    content: '';
    display: block;
    clear: both   
  }

有时会发现不兼容，再加上

  .clearfix:after {
    *zoom: 1
  }

就好了

---

* 儿子做平均布局，此时我有个需求，就是去除左右两边的儿子左右两边的12px空隙，达到如下图效果，怎么办？

效果

我们开始的代码是这样：

  // less
  .father {
    width: 980px;
    .son {
      float: left;
      width: 320ox;
      margin: 10px;
    }
  }

此时我们可以在son外层加一层wrapper，然后

  // less
  .father {
    width: 980px;
    .wrapper {
      margin: 0 -10px;
      .son {
        float: left;
        width: 320ox;
        margin: 10px;
      }
    }
  }

让wrapper添加负margin向左向右开拓10px的内容区域，刚好容纳下左右多出来的10px，就可以像上面那张图一样。

---

* 有一些场景运用flex布局会有一些bug
例如：

效果

  .father {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

第二行不足三个的时候，就变成了上图的情况，这时就不要用flex布局了，用float布局或者用inline-block（有风险）等方法。

BFC

（block formatting context - 块状格式化上下文）
听名字我就觉得打扰了。

BFC有两个重要的特点也是它的作用所在：
1、父元素会包含所有子元素，如果子元素设置了flaot:left，除了父元素用clearfix方法，用BFC也可以达到一样的效果。
2、BFC与BFC之间不相互影响，用张鑫旭的话来说就是，儿子与儿子无论怎么样翻云覆雨，外部父元素也是风平浪静。可以用 float+div 作自适应布局。

一个BFC由下面条件之一创建：
1、float:除了none
2、position:absolute
3、overflow:非visible
4、内联元素
5、display: table-cell、flex 等
6、dispaly: flow-root（这个就是CSS3用来生成BFC所添加的属性，没有任何副作用，除了兼容性）

---

* 有时候BFC与BFC会有间隙，解决：比如A和B之间有空隙，给A元素右边设个负margin：

  .A {
    margin-right: -1rem; //根据实际情况调整
  }

* BFC中垂直方向元素的margin会合并，解决：元素加个边框，或者元素与元素之间加个看不见的border，再或者就是直接让元素生成BFC。
* 计算BFC的高度时，浮动元素也参与计算（清除子元素浮动原理），用BFC清除浮动有时有副作用，clearfix没有。

BFC总而言之`

1、父亲管float儿子
2、兄弟之间划清界限（float+div自适应布局）