浮动定位-BFC-边距合并
问答
1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素的特征：
- 文字环绕浮动元素。
- 脱离文档流、不占位置。
- 任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义display：block；声明。这样就可以为浮动元素定义width和height属性，即使是内联显示元素也可以。
- 当我们没有指定浮动元素宽度时，浮动元素会自动收缩到能够包含内容的宽度。
- 当两个或两个以上的相邻元素都被定义为浮动显示时，如果存在足够的空间容纳它们，浮动元素之间可以并列显示，它们的上边线是在同一水平线上。如果没有足够空间那么后面的浮动元素将会下移到能够容纳它的地方这个向下移动的元素有可能产生一个单独的浮动。
- 浮动元素的影响：
- 普通元素：普通元素将会占据其原来的位置，后面的浮动元素会浮在普通元素之上。
- 文字：文字会环绕浮动元素显示。
- 对其它浮动元素：从左到右，从上到下排列。
- 当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的宽度的变化而变化。
- 当一个包含框中的元素全设置了浮动时，该包含框会出现“高度塌陷”现象。
- 浮动的元素会脱离普通流，因此文档流中的块框会无视浮动的元素，但是文本不会。
- inline元素设置浮动，会改变inline的display使得它像个block-level。
2.清除浮动指什么? 如何清除浮动?
- 清除浮动：当一个容器里的内容浮动时，容器的高度不能自动伸长以适应内容的高度，会使得内容溢出到容器外面而影响布局。清除浮动就是指消除浮动所带来的这种影响。
- 如何清楚浮动：
-
方法一：添加新的元素 、应用 clear：both；
<pre>
HTML:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS:
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
</pre> -
方法二：父级div定义 overflow: auto / hidden
<pre>
HTML:
<div class="outer over-flow"> //这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS:
.over-flow{
overflow: auto;
zoom: 1; //zoom: 1; 是在处理兼容性问题
}
</pre> -
方法三：伪元素法；
<pre>
HTML:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS:
.outer{
zoom: 1;
} //兼容ie
.outer::after {
content:'';
display:block;
width: 0;
height: 0;
clear:both;
}
</pre>
-
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- inherit: 规定应该从父元素继承 position 属性的值。
- relative: 生成相对定位的元素，相对于其正常位置进行定位。
如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。
有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间。 - absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位。
如果没有定位父元素，位置是相对于body来进行的。
绝对定位会使元素脱离文档流中，结果就是该元素原本占据的空间被其它元素所填充。 - fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。
利用fixed定位，我们很容易让一个div定位在窗口任意方位。 - 注意:如果同时定义了left和right值，且width和height有值，那么left生效，right无效，同样，同时定义了top和bottom，top生效。
4.z-index 有什么作用? 如何使用?
- 概念：
1.在 CSS 2.1中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着“z轴”层叠摆放， 当他们相互覆盖时， z轴顺序就变得十分重要。
2.这意味着其实CSS允许你在现有的渲染引擎上层叠的摆放盒模型元素。 所有的层都可以用一个整数(z轴顺序)来表明当前层在z轴的位置。 数字越大， 元素越接近观察者。Z轴顺序用CSS的z-index属性来指定。 - z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- Z-index 仅能在定位元素上奏效（position属性值为 relative 或 absolute 或 fixed的对象）！
- 相同z-index谁上谁下
1.如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
2.如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素 - 父子关系处理
1.如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方
2.如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效 - Z-index默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文。
- 使用：未使用Z-index的情况 , 使用后
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- 使用position:relative将元素偏移后，其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空间。
- 使用负margin使位置偏离后，其它元素将会弥补它偏离后的空间。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？
- 概念
Formatting context（格式化上下文） 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。 - 如何生成BFC
1.根元素(整个页面就是一个大的BFC)
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible - BFC的作用
1、防止margin重叠：根据BFC布局规则，同一个BFC中的相邻块级元素垂直方向的margin会重叠，故要解决margin重叠问题，只需要让两个块级元素处于不同的BFC就ok了。
实例
2、左右两栏布局: BFC布局规则第4条规定：BFC的区域不会与float box重叠。
实例
3、清理内部浮动：如果父元素不浮动，而子元素都浮动的话，那么父元素就无法自动撑开。解决这个问题可以让父类元素形成BFC，因为根据BFC布局规则第6条得知，BFC计算高度时会把其内部浮动子元素的高度也计算在内。
实例
4、内层div的上下margin并不会撑开外层div，反而会使得外层div距离顶部和底部的距离增加。可以使外层div形成BFC来解决嵌套元素边距叠加的问题。
实例
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
-
概念：
外边距合并是CSS中一个特殊的概念。当两个外边距相邻时，它们会合并为较大的那一个。 包括相邻元素的上下边距，父子元素的上下边距，甚至是同一元素的上下边距。
父子外边距合并范例 -
外边距合并场景：
1.毗邻的两个兄弟元素之间的外边距会塌陷；
2.如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动这四条属性（也可以说，当上边框宽度及上内边距距离为0时），那么此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
3.类似的，若块级父元素的margin-bottom与它的最后一个子元素的margin-bottom 之间没有父元素的border、padding、inline content、height、min-height、max-height分隔时，就会发生 下外边距合并 现象。
4.如果存在一个空的块级元素，其border、padding、inline content、height、min-height、max-height都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。 -
合并规则：
1.两个margin都是正值的时候，取两者的最大值；
2.当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
3.当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
4.所有毗邻的margin要一起参与运算，不能分步进行。 -
解决方案：
1、给父元素添加padding或border。
2、让其中一个元素生成BFC。
3、被非空内容、padding、border 或 clear 分隔开。
4、margin在垂直方向上不毗邻。
