1.flex
flex是css3新出来的布局方式，是非常厉害常用的东西。
详情可查询
2.flex易错点：
2.1 flex-grow （扩大）
复制代码112233
页面ui为:
我们发现：
item1元素占据了除了item2和item3所有的位置。
为什么会出现这样的情况？
那我们需要从"剩余空间"这个词说起。
什么是剩余空间呢？具备flex环境的父容器，通常是有一条主轴和一条侧轴，默认情况下主轴就是水平从左向右的，侧轴是垂直从上到下的（类似书写模式）。 剩余空间就是父容器在主轴的方向上还有多少可用的空间。
main是父容器，item1、item2、item3就是子元素，那么
剩余空间 = main元素宽度 - item1宽度 - item2宽度 - item3宽度 = 150px;（上述代码计算）
flex-grow其实就是参与剩余空间的宽度，默认为0，说明元素默认都不会参与使用剩余空间。
- 此例中，只有item1设置了flex-grow：1，也就是说剩余空间1等分，全部给了item1，所以item1的实际宽度为:250px;
- 如果此例中，item2也设置了flex-grow:2，则说明剩余空间已经3等分了，(item1和item2都设置了flex-grow)，所以item1宽度 = 100 + 150 / 3 *1 = 150px; item2宽度 = 100 + 150 /3 * 2 = 200px;
2.2 flex-basis
这个属性值的作用也就是width的替代品。 如果子容器设置了flex-basis或者width，那么在分配空间之前，他们会先跟父容器预约这么多的空间，然后剩下的才是归入到剩余空间，然后父容器再把剩余空间分配给设置了flex-grow的容器。 如果同时设置flex-basis和width，那么width属性会被覆盖，也就是说flex-basis的优先级比width高。有一点需要注意，如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。
2.3 flex-shrink （缩小）
注意一句话: 如果剩余空间为正数，则说明子项目宽度之和小于 父元素项目宽度，也就不存在flex-shrink
当子项目不存在换行，且子项目宽度之和 大于 父元素项目宽度，为了完整的显示子元素，肯定会子项目进行缩小处理，那这个缩小规则是什么呢？
flex-shrink：默认为1，也就说如果子项目宽度之和 大于 父元素项目宽度，那么所有的子元素都缩小相同的宽度。
复制代码112233
如果此例中，item2的flex-shrink：2，如果默认的压缩率是x，则item2的压缩率为2x
则 500 = 200 *（ 1-x） + 300 *( 1-2x) +150*(1-x) 可以计算出每个子元素各占的宽度。
如果flex-shrink:0;则说明这个容器在任何时候都不被压缩
也就是说:必须子元素合盒子宽度之和 大于 父元素，该属性才会生效。
2.3 flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
总结：
1、剩余空间＝父容器空间－子容器1.flex-basis/width - 子容器2.flex-basis/width - …
2、如果父容器空间不够，就走压缩flex-shrink，否则走扩张flex-grow；3、如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0；4、如果子容器的的flex-basis设置为0(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将不会为子容器预留空间。5、如果子容器的的flex-basis设置为auto(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。
2.BFC
2.1 知识准备(对以往知识的重新理解)
- float到底因为什么出现？
- float有那些特性？
1. 脱离文档流
2. 块状该元素（一个内联元素，设置了float，则相当于为该内联元素设置了 display:block）
3. 没有margin重叠
4. 包裹性
假设浮动元素父元素宽度 200px，浮动元素子元素是一个 128px 宽度的图片， 则此时浮动元素宽度表现为“包裹”，就是里面图片的宽度 128px
- margin重叠问题？
1.相邻兄弟元素之间的margin重叠。(发生在块级元素，且只在垂直方向，并非某些博客写的仅仅在bfc里出现，记住这是公用的规则)
2.父元素和第一个子元素和最后一个子元素的的重叠问题(也是在垂直方向)
- float脱离文档流? 和absolute的区别？
我记的当初学习float absolute这些css属性时，说到他们会脱离文档流
// 看下面代码(来自css世界-张鑫旭)img { float: left; }它的效果是一个：文字环绕图片的效果。// 明明当初学的时候说到： float元素会脱离文档流，那应该p内容会从最左边开始展示，那为什么是在img右边呢？// 其实还有一个概念：部分无视和完全无视部分无视：(以上面代码为例) 虽然img元素脱离了文档流，p会无视img(我们发现，p的width确实是屏幕宽度)，但是p内部的文本会为img让出位置(所有的float元素都有这个问题)完全无视：比如absolute元素，其他元素会完全无视*** 这因为“部分无视”的缘故，才能有“文字环绕效果” ***复制代码
小猫1，小猫2，...
- 提醒
bfc这个东西，不要看博客！看书即可，（张鑫旭大佬的《css世界》）！
因为博客里写的繁杂且乱，对于我们一般开发而言，仅仅知道bfc能干什么？能解决我们什么问题即可。
因为css的世界真的是繁杂且浩瀚，需要大量的时间去阅读相关的知识。
2.2 BFC核心
概念：块级格式化上下文（block formatting context) ，反正看了听了也不懂。（可以简单理解为生成了一个封闭的空间，内部元素出不来，外部元素进不去，具有很强的防御性）
核心理念：只要一个元素具有bfc，内部元素如何折腾都不会影响到外面的元素。
思考：
我们上面说的margin重叠问题，以及float元素导致父元素高度塌陷问题。
是不是这样理解，只要这个父元素具有了bfc，那float导致的高度塌陷问题也就解决 了？如果bfc不解决高度塌陷问题，则与它的“核心理念”就背道而驰了。不解决这个问 题，那必然会影响到外面元素的问题。
至于margin重合问题，如果该元素有bfc，如果margin重合问题依然存在，那势必 影响到外面元素。（联想一下，父元素和第一个子元素和最后一个子元素的的重叠问 题，如果第一个子元素具有了bfc，而它的重合问题依然存在，必然与“核心理念”背道 而驰）
解决的问题：
1.margin重叠问题解决了
2.高度塌陷问题解决了
问题来了，如何使一个元素具有bfc？
让一个元素具有bfc的条件有哪些？
-
<html>根元素;
-
float 的值不为 none;
-
overflow 的值为 auto、scroll 或 hidden;
-
display 的值为 table-cell、table-caption 和 inline-block 中的任何一个;
-
position 的值不为 relative 和 static。
我们想想：我们之前写的清除浮动，不就是父元素{overflow:hidden},其实它是生成了bfc，解决了高度塌陷问题。
所以，我们以后遇到margin重叠问题，高度塌陷问题，第一时间想到bfc可以解决。
我们平时很常用的解决方式就是 overflow:hidden(因为它造成的影响相对较小)
其实这里，我们经常遇到的想不通的css问题都迎刃而解了，那其实bfc最最重要的特性是构建流式布局。
** 面试常见问题： 左边固定宽度，右边自适应布局
最最常见的解决方案：
// 方法1.left{ float:left; width:200px; height:200px}.right{ overflow:hidden}// 方法2.left{ float:left; width:200px; height:200px}.right{ display: table-cell; width: 9999px}// 以上均支持ie8及其以上适配 复制代码 2.3 BFC的总结
在我们水平还有限的情况下，只需要记住：当我们遇到margin重叠，高度塌陷问题，流式布局问题，第一印象想到bfc。想到生成bfc的条件，以及最常用的解决方法即可。