两栏布局

写在前面

平时自己做项目基本都是在使用flex布局了，使用的Bootstrap 4.0 的版本，其也是基于 flex 布局设计的，在 caniuse 上查 flex 布局的兼容性，也是除了 IE 这个即将灭亡的浏览器外，几乎所有新版的浏览器都支持，但是 flex 的一些单独的属性在一些移动设备的浏览器上支持性不怎么好，甚至完全不支持，真搞不懂，最最强大的 grid 布局都快要开始盛行了，某些浏览器怎么还不支持 flex 的所有属性，各大浏览器就不能紧跟 CSS3 的更新随度么？
两栏布局的是前端页面布局常见的布局，两栏布局指的是有一个侧边栏的宽度是固定的(或者由内容撑开但有最大宽度限制的)，搜罗各大博客总结如下：

1. flex 布局——小case

如果不用兼容 IE 或旧版的浏览器，直接使用 flex 布局的 flex-grow 属性，简单粗暴，柔性又好。并且，flex 布局实现的两栏布局的侧边栏的宽度不需要非得指明宽度，可以靠内容撑开。而且高度也都不需要指定，两个元素的高度都会时刻保持一致。

<div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码

.container{
  border: 2px solid;
  display: flex;
}
.left{
  background: red;
  width: 100px;
  height: 100px;
}
.right{
  background: blue;
  flex-grow: 1;
}
复制代码

2.float布局

float布局的兼容性相对来说最好的，毕竟是比较老的布局方式了，实现起来各种麻烦，但是没办法，当要兼容 IE 或旧版浏览器时必须用 float 布局。
以下两种方式的 float 两栏布局的两个元素的高度若想保持一致，必须手动设置两个元素的高度值，但以上的 flex 就不用，会自动高度一致。
PS： 使用了 float 布局要记得清除浮动。

2.1 单 float + margin——侧边栏宽度为固定值

<div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码

div{
  border: 1px solid;
}
/*---清除浮动---*/
.container:after{
  content: "";
  display: block;
  clear: both;
}
.container{
  zoom: 1;
}
/*---清除浮动---*/
.left{
  float: left;
  height: 100px;
  width:100px;
}
.right{
  background: red;
  margin-left: 100px;
  height: 100px;
}
复制代码

实现原理：
该方法的实现原理很简单，就是将左侧元素设置为浮动元素，则左侧元素脱离了正常文档流，右侧的元素仍然在文档流中，则会看不到左侧浮动元素的位置，覆盖左侧浮动元素的位置占满一行(div元素默认占满一行)，但此时右侧普通元素有一部分压在左侧浮动元素的下面，虽然在文字上看不出来(也不知道为啥文字没被遮住)，因此，就为右侧的普通元素设置一个左侧 margin，大小为左侧浮动元素的宽度，因此，这也就必须要求左侧元素的宽度必须是已知的。

2.2 单 float + BFC——侧边栏宽度不是固定值

该种方式的实现和上述方式类似，得到的效果和上述一样，只是将右侧元素的样式改为如下代码：

.right{
  background: red;
  /*---创建一个BFC---*/
  overflow: hidden;
   /*---创建一个BFC---*/
  height: 100px;
}
复制代码

实现原理：
这种方式是利用了BFC的一个重要用途：清除浮动，清除浮动简单来说就是让设置了清除浮动的且在文档流中的正常元素能看到浮动元素的存在，从而不要占据浮动元素的位置或包裹住浮动子元素，BFC可以用于清除浮动，为某个元素创建BFC，就可以看见其所在范围的浮动元素。
以上方法就是为右侧的在文档流中的正常元素创建BFC，使其清除浮动，然后看到左侧浮动元素的存在，就不会占用其位置。
创建 BFC 的方式有很多种，上述的 overflow: hidden; 只是其中一种比较简单且副作用小的方式。