今天完成的事情：重新复习任务一和任务二的深度思考以及相关延伸知识，完成了自己的简历
明天计划的事情：看es6和任务3和任务4的简历
遇到的问题：问题基本能自己解决
收获：

浮动和inline-block的区别和清除浮动

以及inline和block的使用

空隙产生的原因

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

方法6 ： 给父元素设置display：flex，

浮动：

1.浮动不是任意的，其还是在父元素的范围之中，不能脱离于父元素的内容区域。

2.若浮动元素比它的父元素还高，那么它就会溢出父元素外面

3.脱离文档流（普通流）

4.浮动有可能会造成父元素的高度坍塌

清除浮动：

1.直接给父元素定高：解决浮动元素脱离文档流导致的高度坍塌

2.给父元素加overflow:hidden属性触发bfc（关于bfc后面会详谈）

3.给元素添加display：inline-block（原理也是触发bfc）

4.使用伪类

5.在浮动元素后添加空标签并使用clear：both这个是不允许有浮动元素在哪个位置both是左右（clear只能清除该元素之前的浮动。 ）

bfc：

BFC的布局规则是什么？

1.内部的box会在垂直方向，一个接一个地放置（可以看作BFC中有一个的常规流）。

2.Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box 的左边，会包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此

4.BFC的区域不会与float box 重叠

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

6.计算BFC的高度时，浮动元素也参与计算

那些情况会产生新的BFC/如何创建BFC？

⑴根元素或其它包含它的元素

⑵浮动 (元素的 float 不为 none)

⑶绝对定位元素 (元素的 position 为 absolute 或 fixed)

⑷行内块 inline-blocks (元素的 display: inline-block)

⑸表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)

⑹表格标题 (元素的 display: table-caption, HTML表格标题默认属性)

⑺overflow 的值不为 visible的元素

⑻弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

由bfc延伸至高度坍塌：

父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

float 脱离了普通流，并且创建了新的BFC，而父元素不具备产生 BFC 的条件，所以它的高度为0。

通过了解BFC的特性我们知道，BFC会把它包含的浮动元素高度也算在里面，也就是闭合浮动。

拿 overflow: auto 举例：

overflow: auto 并不会闭合浮动，而是 overflow: auto 会创建一个新的BFC，避免浮动的元素侵入其他元素。

和clear：both很像

由bfc又延伸到margin重叠：