浮动定位和BFC边距合并

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

特征：

• 元素脱离正常文档流，文字环绕图片，浮动可以向左或向右移动，直到它的外边缘碰到包含框，或另一个浮动框的边框为止。
• 浮动元素可以理解为带方向的inline-block元素，可以同行排列，可以设置元素宽高、边距，只是排列顺序可以从右到左。

影响：

• 对父容器的影响：不与父容器发生外边距合并，无法撑开父元素。
• 对其他浮动元素的影响：对于浮动元素前面的普通元素，由于它们已经占据了文档流的空间，浮动元素不会对其造成影响。对于浮动元素后面的元素，因为浮动元素浮动后让出了文档流空间而向上移动，填补了浮动元素原先的文档流空间。
• 对普通元素的影响：会无视浮动元素的存在,从而占据浮动元素的"原来的位置"
• 对文字的影响：文字是匿名行盒，可以看到浮动元素，文字会环绕、包裹浮动元素。

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

一个块级元素如果没有设置height，那么其高度就是由里面的子元素来撑开的，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略。浮动的特性在布局中使用会对后面的元素造成影响而且造成浮动元素的容器高度失效。因此我们需要随时清除浮动。

清除浮动的方法：

方法一：
利用 clear属性，清除浮动,添加新的元素，应用clear：both

方法二：
使父容器生成BFC

• float为left或right
• overflow:hidden/auto
• display:block/table
• position:absolute/fixed

方法三：
使用伪元素
就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果

image.png

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

静态定位

position: static;

静态定位是每个元素获取的默认值。
使用默认布局

绝对定位

position:absolute;

绝对定位，脱离文档流的布局，遗留下来的空间由后面的元素填充。
定位的起始位置为最近的父元素
使用场景：可以制作出图片堆叠效果。指定一个子元素在其父元素中的位置。

相对定位

position:relative;

相对定位，不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。
定位的起始位置为此元素原先在文档流的位置
一般是设置在父元素上

固定定位

position:fixed;

固定定位，但不随着滚动条的移动而改变位置，相对于浏览器窗口定位
定位的参照系为浏览器边框
可用于一个网页的头部导航或者广告之类的，不想让其随着页面滚动的元素。

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

• 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

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

外边距合并出现的三个场景:

• 当元素属于同一个BFC时，且同处于普通流中的垂直相邻元素外边距合并。
• 父子元素的外边距合并
• 空元素的外边距合并。

外边距合并规则：

• 当两个margin为正数时，取最大的
• 当两个margin为负数时，取绝对值大的那个，然后从0开始负向位移
• 当有正有负时，先取出负margin中绝对值中最大的，然后和正margin值中最大的 margin 相加。
• 所有相邻的margin要一起参与运算，不能分步进行。

不让相邻元素外边距合并方法：

• 元素之间设置adding、border 或 clear隔开
• 创建一个BFC，消除两者之间的影响。

父子外边距合并范例

---

代码

alert效果
表单效果
模态框效果
导航栏效果
圣杯布局
双飞翼布局