1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
文档流：在html中文档流即为元素从上至下排列的顺序。
脱离文档流：元素从正常的排列顺序被抽离,让元素脱离文档流的方法有：浮动和定位。
最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
浮动元素后面的内联元素会向此浮动元素的外边距靠齐
float造成的影响
1. 对其父元素的影响
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
2. 对其兄弟元素（非浮动）的影响
该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素
3. 对兄弟元素为内联元素的影响
该元素会环绕浮动元素排列。
4. 对其兄弟元素（浮动）的影响
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向时，在同一条水平线上，相互不影响。当位置不够时后写的元素另起一行
5. float对自身元素的影响
float对象将被视作块对象(block-level)，即display属性等于block。
6. float对子元素的影响
我们知道当一个元素浮动时，在没有清楚浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
2. 清除浮动指什么? 如何清除浮动?
清除浮动并不是清除浮动的特性，而是清除浮动带来的影响
1. 添加额外标签
通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可
<div class="warp" id="float1">
<h2>1）添加额外标签</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>
优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的.
2. 父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；
<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素设置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；
3. 父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
4. 使用:after 伪元素
利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/
3. 有几种定位方式，分别是如何实现定位的，参考点是什么？
static：静态定位是position的默认值，元素框正常生成，也就是没有定位时的正常显示。
relative：相对定位
用法一：元素相对自身的原位置偏移某个距离，但是原本的空间依旧保留，表现为空白。
用法二：把一个元素设置为position: relative; 可以使该元素的子元素相对该元素绝对定位。
absolute：绝对定位
元素从文档流删除，并相对于包含块定位。元素在原本的空间关闭。元素定位后生成一个块级框，不论它原来是行内元素还是块级元素。
包含块：最近的position值不是static的祖先元素(块级或行内)，一般会指定一个元素作为绝对定位元素的包含块，将其position设置为relative而且没有偏移。
绝对定位是相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块。绝对定位的框可以从它的包含块向上、下、左、右移动。
绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。
fixed：固定定位
元素从文档流删除，并相对于浏览器视窗定位，因此不随文档滚动而移动。元素在原本的空间关闭。元素定位后生成一个块级框，不论它原来是行内元素还是块级元素。与绝对定位的区别仅仅是包含块不同。
固定定位是相对于浏览器窗口，其余的特点类似于绝对定位。
4. z-index 有什么作用?
z-index属性指定2个方面的内容：
1、元素的堆叠级别。
2、元素的堆叠上下文。
z-index属性只能够应用在display属性为relative、absolute或fixed的元素上。
堆叠级别是元素在Z轴上的取值。值越大，堆叠级别越高，堆叠级别高的元素位于堆叠级别低的元素之上，级别越高的元素越接近屏幕的显示平面。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；
相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
- 两个同级上下元素
- 祖先元素与内嵌元素（没有内边距或边框隔开,就祖先元素overflow:hidden/auto/scroll可有隔开的作用，避免叠加）
- 本身是空元素时,自身上下外边距也会重合（没有边框或内边距隔开）
border和padding是不让父子元素外边距合并。
网友评论