浮动定位BFC边距合并

问答

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

1. 特征：

• 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.
• 如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住

2. 影响：
3. 对父容器：父容器可能看不到该浮动元素，即可能父元素高度塌陷
4. 对其他浮动元素：如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住
5. 对普通元素：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
6. 对文字：文字所在行框（或display：inline-block）因为浮动元素的挤压而缩短，从而围绕浮动元素排列。

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

1. 解决父容器高度塌陷的问题
2. 清除浮动的方法

• 最后面加一个元素，设置clear:float
• BFC清除浮动，设置父容器为BFC，形成BFC的方法：
• float为 left|right
• overflow为 hidden|auto|scroll
• display为 table-cell|table-caption|inline-block
• position为 absolute|fixed
• 通用方案：设置:after的样式为清除浮动（若支持IE6、7：*zoom:1）

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

1. 5种方式：inherit,static,absolute,relative,fixed
2. 如何实现定位，参考点，使用场景：
3. inherit:定位继承方式几成父容器，(若父容器是相对定位，它也是相对定位)
4. static:默认值，是普通文档流
5. absolute:
   • 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
   • 参考点： 最近的不是static定位的祖先容器
   • 使用场景：元素水平垂直居中
6. relative:
   • 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留
   • 参考：是自身在文档流中的位置
   • 场景：图片小位移，作为绝对定位的参考点
7. fixed:
   • 元素框的表现类似于 absolute，不过其包含块是视窗本身
   • 参考点：浏览器窗口
   • 场景：位置固定的弹窗或返回顶部按钮等

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

1. 作用：控制非文档流元素的叠放顺序，该属性值越高，元素位置越靠上。
2. 使用：当设置为relative、absolute或fixed时，通过设置z-index决定叠放顺序

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

1. position:relative

不会影响其他元素：显示位置发生变化，文档流位置不变

2. 负margin

会影响其他元素：显示位置和文档流位置均发生变化

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

1. BFC直译为“块级格式化范围”(Block Formatting Context)。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。
2. 形成BFC的方法：
   • float为 left|right
   • overflow为 hidden|auto|scroll
   • display为 table-cell|table-caption|inline-block
   • position为 absolute|fixed
3. 作用：

• 设置父元素为BFC可以清除浮动，代码范例

• 解决margin重叠问题。只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠，[代码范例](http://js.jirengu.com/torejixoni/1/edit)
  

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

1. 两种情况：

• 当两个垂直方向相邻元素都不是浮动元素时,相邻上或下外边距取较大值进行合并
• 父子元素间没有阻挡（如：边框、非空内容、padding等）时发生上或下外边距合并。

2. 满足上面两种情况：相邻非浮动元素，父子元素没有阻挡
3. 分两种情况
   • 垂直相邻元素外边距合并
     • 设置浮动
     • 设置其中一个元素display:inline-block等等
   • 父子元素外边距合并：
     • 为父元素设置padding或border
     • 设置父元素为BFC
4. 父子元素合并范例

代码

1.实现如下alert效果，效果范例14

代码链接

2.实现如下表单效果， 效果范例13

代码链接

3.实现如下模态框效果， 效果范例11

代码链接

4.实现如下导航栏效果，效果范例12

代码链接