浮动定位BFC边距合并
- 浮动元素有什么特征？
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个 浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
- 如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住
- 创建浮动框可以使文本(文字要足够多才有视觉效果)围绕图像
- 对父容器、其他浮动元素、普通元素、文字分别有什么影响?
对父容器:
如果给父容器中(div)的元素设置了浮动，因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间，会产生视觉上有缝隙，需要设置个空div来clear:both
Paste_Image.png
对其他浮动元素:
浮动元素之间能相互感知到彼此的存在，若有三个框都向左浮动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框；如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间；如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
Paste_Image.png
对普通元素：
普通元素无法感知到浮动元素的存在
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失，如下图左所示：
Paste_Image.png
对文字：
如果父容器内文字足够多，又有一个向左浮动的图像，那文字就会围绕这个图像浮动，意思就是文字能感知到浮动元素的存在
Paste_Image.png
- 清除浮动指什么?
一方面指清除文字围绕浮动元素的情况，另一方面使浮动元素在视觉上被父容器包围 - 如何清除浮动? 两种以上方法
- 直接给被清理的元素添加上margin或者左margin，(假设浮动元素位于左上角)，使其能在浮动元素之下或者右侧
- 让未浮动元素也浮动，如一个左浮动，一个右浮动
如文章开头图示
但是以上方法会在视觉上出现父容器未包围浮动元素的情景：
- 使用clear属性(本质也是给被清理元素加上外边距):我们需要加一个空的元素div，并使用clear: both
- 不使用clear属性，对容器div进行浮动，但这样会使下一个元素受到影响。
为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。
兼顾浏览器的通用方法：
Paste_Image.png
- 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
position:
static
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- 正常文档流
relative- 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
- 元素相对于原来所处位置进行相对移动，
absolute- 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- 元素相对于其包含块进行定位移动(默认值在content上，设置top:0，left:0则在边框上)，若该元素外无定位属性元素，则参考HTML的根元素进行定位
fixed- 元素框的表现类似于将 position 设置为absolute，不过其包含块是视窗本身。
- 与absolute类似，不过其参考点唯一确定为viewpoint
-
z-index 有什么作用?
定义：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明：
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。 -
z-index 如何使用?
Z-index 可用于将在一个元素放置于另一元素之后。
先设置position，然后设置z-index可能的值
auto：默认。堆叠顺序与父元素相等
number：设置元素的堆叠顺序
inherit：规定应该从父元素继承 z-index 属性的值 -
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
-
BFC 是什么？举例说明
- Block Formatting Context，是Web页面中盒模型布局的CSS渲染模式
- 摘自W3C：浮动，绝对定位元素，inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。
- 一个BFC是一个HTML盒子至少满足下列条件中的任何一个：
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible
- 如何生成 BFC？
一个BFC可以被显式的触发。如果想要创建一个新的BFC，只需要给它添加上面提到的任何一个CSS样式就可以了。 - BFC 有什么作用？
BFC可以包含浮动。可以把浮动元素变为常规元素，让父元素包裹浮动元素。当我们碰到这种情况，一个容器里有浮动元素，容器元素没有高度，它的浮动孩子将会脱离页面的常规流，那我们可以使用一个BFC来解决，如下图：
Paste_Image.png
使用BFC来防止外边距折叠
首先，在同一BFC当中，内部的元素外边距会发生折叠，不过可以通过修改其中某个元素使他成为一个BFC就可以消除折叠(当然是当你需要这个元素发生折叠的时候)，大概效果图如下：
Paste_Image.png
第二个和第三个兄弟元素属于不同的BFC时，他们将不会发生外边距折叠
- 使用BFC来防止文字环绕
下图很好的解释了当一个元素浮动时，文字为什么会环绕
Paste_Image.png
图中HTML假定为：
Paste_Image.png
在上图中的整个黑色区域为p元素。正如我们所看到的，这个p元素并没有移动，但是它却出现在浮动元素的背面。p元素的line boxes（指的是文本行）进行了移位。此处line boxes的水平收缩为浮动元素提供了空间。随着文字的增加，因为line boxes不再需要移位,最终将会环绕在浮动元素的下方。
根据这些，我们给p元素创建一个新的BFC，那么他就不会紧挨这容器块的左边缘，比如添加一个overflow:hidden来实现
这里有一个解答BFC较为详尽的blog
- 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并指的是，在同一BFC当中，内部的元素外边距会发生折叠(当两个垂直外边距相遇时，它们将形成一个外边距)，不过可以通过修改其中某个元素使他成为一个BFC就可以消除折叠。
当外边距为正值时，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当外边距出现负值，合并时取他们和的绝对值，合并的情况无法消除。
父子外边距合并
Paste_Image.png
