DAY5～6

盒模型

外部显示类型	是否换行	width、height是否起作用	是否推开其他元素
inline	不换行	起作用	margin border padding 会使其他元素从当前盒子周围推开
block	换行	不起作用	margin border padding会起作用，但是不会把其他处于inline的盒子推开，使得内边距和边框会与段落中的其他单词重叠。如下图左
inline-block	不换行	起作用	margin border padding 会使其他元素从当前盒子周围推开，如下图右

参考链接

• 块级元素： div h hr li…
• 内联元素：a span strong em…

CSS盒模型

完整的CSS盒模型应用于块级元素，内联盒子只使用CSS盒模型的部分定义。之前在DAY2中有完整的叙述CSS盒模型。

浮动

浮动属性可以实现简单的布局，是传统的布局方法（现在还有flexbox布局）。浮动的框可以向左向右移动，直到它的边缘碰到包含框或另外一个浮动框的边框为止。

1. 浮动属性可以使元素脱离普通流，并吸附到其父容器的左边（或右边）。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧（或左侧）的空间。

2. 浮动内容仍然遵循盒子模型诸如外边距和边界。

清除浮动

– why:浮动使在正常布局中位于该浮动元素之下的内容，围绕着浮动元素，并填满其左侧或者右侧空间，影响整体布局。当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）
– how:添加额外标签 <div style=“clear:both”></div>，clear的属性值有left|right|both|none。其他清除浮动方法见链接如何理解 CSS 中的浮动布局方式？最主要的功能是什么？如何正确地使用它？

– BFC(块格式化上下文) 块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。创建块格式化上下文的的方式见链接块格式化上下文。