今天完成的事情：昨天说负margin，left和top的参考线，是以元素的紧邻元素，它可以是同级或者父级，而父级的边界就涉及到一个知识点，containing block也就是包含块：

包含块是一个相对的存在，它可以确定自己的尺寸基准，至于一个元素的包含块如何确定：

1、根元素所在的包含块叫初始包含块 initial containing block。对于连续媒体设备（continuous media），初始包含块的大小等于视口viewpor的大小，基点在画布的原点（视口左上角）；对于分页媒体（paged media），初始包含块是页面区域（page area）。初始包含块的direction属性与根元素的相同。

2、对于其他元素，如果元素的position属性是relative或static，他的包含块是由最近的祖先块容器盒（block container ancestor box）的内容区域（content edge：width属性和height属性确定的区域）创建的。

3、如果一个元素的position属性为fixed，他的包含块由视口创建（连续媒体）或者由页面区域创建（paged media）。

4、如果元素的position为absolute，他的包含块由最近的position不为static的祖先元素创建，具体创建方式如下：

           A.如果创建包含块的祖先元素是行内元素（inline element），包含块的范围是这个祖先元素中的第一个和最后一个行内盒的padding box围起来的区域。

           B.如果这个祖先元素不是行内元素，包含块的范围是这个祖先元素的内边距+width区域（padding edge）。

如果没有找到这样的祖先元素，这个绝对定位的元素的包含块为初始包含块。

继续说多列布局，其中左定宽，右自适应：

除了昨天的利用浮动和负margin；还有利用浮动让下一个元素与之重叠，然后用margin与其分隔开：

上面两种方法都会发生重叠，而且还要多加一个div

用触发dfc来布局就会简单得多，触发bfc方法有很多，但是限制最少的就是overflow

所以左面依然是定宽的浮动元素，右面是一个bfc的自适应宽度的元素，他们就可以并排存在：

由此延伸出来的叫双飞翼的布局，就是两边定宽中间自适应：

还有实现方式比如table和flex来实现，

而右定宽左自适应也是相同的原理；

而我上面提到的双飞翼还可以用flex和table来实现原理基本相同，先是给父级一个display：flex/table，然后设置三个子级，两边的设置好宽度，中间不设置宽度。

table：

.parent{width:100%;display:table;table-layout:fixed}

.left,.center,.right{display:table-cell;}

.left{width:100px;}

.right{width:100px;}

flex：

.parent{display:flex;}

.left{width:100px;}

.center{flex:1;}

.right{width:100px;}

还有些小知识点，比如html默认英文和数字是不会换行的，margin是不会左右重叠的，浮动清除是作用在自身，用来清除他的前一个浮动元素对他的浮动影响，这个属性不会抵消浮动属性也不会改变外界元素的属性。

明天要做的事情：开始布局任务8
遇到的问题：知识很杂，不知道那些该看，那些该等等再看。
收获：多列布局各种方法原理都理清了。