css浮动

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

浮动元素有什么特征？->
1.脱离普通文档流，不占据原来的位置. 浮动元素左右移动至包含框或者另一个浮动元素的框的边缘。块级元素当浮动元素不存在，内联元素环绕浮动元素排列。具体可参考<css权威指南>
对父容器、其他浮动元素、普通元素、文字分别有什么影响?

1. 对于父容器而言，如果没有设置其高度，而子元素设置float，会造成‘塌陷’的效果。可用BFC原理或者清除浮动解决.
2. 对于其他浮动元素而言： 如果宽度足够会水平排列; 不足会下移靠左/右移动;当第一个浮动元素的高度大于第3个浮动元素的高度并且整体宽度不足以水平放下多个浮动元素,会造成‘卡住’的效果
3. 普通元素：

   * 当为块级元素时会当浮动元素不存在
   * [当为内联元素时会‘感知’浮动元素，环绕浮动元素。->[链接](http://js.jirengu.com/tucexasixa/2/edit)

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

• 在水平方向上没有浮动元素存在.
• 包裹一层‘外套’,BFC
• 改变元素的垂直方向的位置 clear: left/botn/right

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

position: relative 根据自身定位
absolute 根据父级设置定位来绝对定位,都没有根据HTML来进行定位.
fixed 根据浏览器窗口来进行定位
static 默认样式
sticky 可以看成是relative和fixed的集合体.当在页面可视范围内以relative，当页面滚动超出目标区域时，以fix定位.
一般 absolute 配合 relative使用.当父容器的宽高可变时，使用绝对水平垂直居中。
sticky 是css3的新属性，兼容性不太好.

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

层叠上下文 .配合定位使用 z-index大的在上,小的在下。参考链接->关于z-index

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

根据元素还在普通文档角度看。设置positon: relative 还在原来的文档流，-margin则相反。

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

块级格式化上下文(block formart context) css2.1新增的一个概念。它是页面中的一个渲染区域，有自己的一套渲染规则。里面的子元素根据这个规则进行定位. （可以理解为一个与外界格局的包含块，里面不管浮动 定位 什么的 即使在怎么'翻江倒海'都不会其临边的元素.该怎么就怎么显示）
body 根元素
浮动元素
定位元素 position: absolute/fixed
positon: relative/sticky/static不会触发BFC

qq 20170503230045
display: inline-block /table-cell/flex
overflow: auto/hidden/srcoll 除了visible
一般如果父容器不设置高度，里面的子元素采用某种方式脱离文档流，会造成高度塌陷。BFC可以解决父容器没有高度的问题。
比如实现一个两栏布局: [父元素可以实现高度自适。,可以实现一个简单的二栏布局.->两栏布局

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

普通文档流，同一个块级上下文中 的垂直方向上。为什么会产生这种效果,完全是历史遗留问题，主要是为了解决文字排版的需求。
比如相邻的块级分别设置margin为50px 和 100px. 会选择大的margin会参考值

qq 20170503231828

比如 元素内嵌套多个div，最终参考的是marign最大的那个指.

qq 20170503232222

相邻的两个元素一个正maing一个是负margin，最终取计算后的值。
可以不在同一个块级上下文中.设置border padding。会创建一个BFC

* 实现如下alert效果alert

* 实现如下表单效果form

* 实现如下模态框效果model

* 实现如下导航栏效果navigation