浮动，定位知识点小结（1）

---

浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

特征：

• 浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘；
• 浮动元素的左右外边界不能超过其包含块内容区的左右内边界；
• 浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。

影响：

• 浮动元素对父容器的影响：父容器设置自适应高度时，会忽略浮动元素，如果包含块内全是浮动元素，自适应高度为0。
• 其他浮动元素的影响：浮动元素之间不可层叠，浮动元素会浮动的顺序排列，如按顺序生成的元素a，b，c，同时设为左浮动，显示顺序是a,b,c；同时设为右浮动，显示顺序是c，b，a。
• 普通元素的影响：会重叠在普通元素上面。
• 对文字的影响：浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框，即文字会围绕浮动元素。

---

清除浮动指什么? 如何清除浮动? 两种以上方法

子元素浮动引起父元素高度塌陷，因为没有预先设置div高度，所以div高度由其包含的子元素高度决定。而浮动脱离文档流，所以子元素并不会被计算高度。此时的div中，相当于div中子元素高度为0，所以发生了父元素高度塌陷现象。

清除浮动指：

• 消除浮动元素对其父元素因浮动元素造成的高度塌陷的问题

清除浮动的方法：

• 可以利用clear:both来清除相应块状元素两侧的浮动元素。
• 可以利用父元素成为BFC来消除浮动影响，可以使用overflow: hidden/auto/stroll; display: inline-block; float: 方位;等来实现将父元素变成BFC。

---

有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

• inherit 规定应该从父元素继承 position 属性的值
• static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
• relative生成相对定位的元素，相对于元素本身正常位置进行定位
• absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left,top, right 及 bottom 属性进行规定
• fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
• stickyCSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超目标区域时，它的表现就像position:fixed，它会固定在目标位置。

---

z-index 有什么作用? 如何使用?

• z-index规定了元素在Z轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面。
• z-index仅在设置了position非static属性的元素生效，且z-index的值只能在兄弟元素之间比较。
• z-index默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文。

---

position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative 相对自己原本的位置偏移，不影响其它普通流中元素的位置。
margin 除了让元素自身发生偏移还影响其它普通流中的元素。

---

BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC(Block formatting context)直译为"块级格式化上下文",使元素形成独立的与其他块隔离的容器，确保内部元素的属性不会影响到外部其它元素。

生成BFC的元素属性如下：

1. float为 left | right
2. overflow为 hidden | auto | scroll
3. display为 table-cell | table-caption | inline-block
4. position为 absolute | fixed

BFC作用

1. 解决外边距合并的问题，让两个块级元素处于不同的BFC中
2. 解决父容器高度塌陷问题
3. 解决文字对浮动元素环绕的问题

---

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

外边距合并场景：

• 同一个BFC内，且同处于文档流中的垂直相邻元素外边距会合并。
• 父元素与子元素的外边距会合并。
• 空元素的外边距合并。

合并方式：

• 两个margin都是正值的时候，取两者的最大值；
• 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
• 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
• 所有毗邻的margin要一起参与运算，不能分步进行。

如何阻止合并：

• 被非空内容、padding、border 或 clear 分隔开。
• 不在一个普通流中或一个BFC中。
• margin在垂直方向上不毗邻

父子外边距合并例子如图

由于父子外边距合并，父元素margin-top由50px变为100px，给父元素加个边框border: 1px solid 后变为

或给父元素加个padding，如图

---