浮动元素的特征及影响

• 特征：
• 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框（父元素的border边界）或者另一个浮动元素的框的边缘。
• 浮动元素不在文档的普通流中，文档的普通流中的元素表现的会像浮动元素不存在一样，会被覆盖；但其中的文本会“感觉到”，被“挤”开。

覆盖和挤开.png

• 若多个浮动元素宽度超过父容器边框宽度时，超过的浮动元素会向下移动，下移的距离即上一个浮动元素的高度。若其上一个浮动元素的高度并不是前面那些浮动元素之中最高的，会出现“卡住”的现象。

2.png

• 若浮动元素的父元素（父容器）没有设置高度，其同级元素又都是浮动元素，则父元素会发生高度塌陷。

高度塌陷.png

• 影响：
• 对父容器：若同级元素全为浮动元素，且父容器没有设置高度，则父容器高度塌陷。
• 对其他元素： 无视浮动元素而位置重叠，进而被浮动元素覆盖。
• 对文字：文字会“感觉到”浮动元素的存在，环绕浮动元素。
• 对其他浮动元素： 多个浮动元素依属性按html顺序浮动，若父容器宽度不够，则多出的浮动元素下移（下移高度为前一个浮动元素高度）并继续依属性偏移。

清除浮动

• 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
• 如何清除浮动：
• 使用带clear属性的空元素。
  在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

4.png
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

• 形成BFC（后文有详解）。
  给含有浮动元素的父容器设置一些属性，如：

属性	值
float	left ; right
overflow	hidden ; auto ; scroll
display	table-cell ; table-caption ; inlin-block
position	absolute ; fixed

而具有BFC属性的父元素具有包含浮动元素的能力，即达到清除浮动的目的。
优点：不存在结构和语义化问题，代码量极少。
缺点：根据使用属性的不同可能会出现一些预期之外的其他情况，或多或少有副作用。

• 通用方案（使用伪元素选择器）。
  给父容器加上一个class（eg: clearfix），然后CSS中使用如下代码：

.clearfix:after {
  content: "\200B";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  *zoom:1; 
}

伪元素法.png

优点：结构和语义化完全正确,代码量居中。
缺点：复用方式不当会造成代码量增加。
PS：

1. display:block 使生成的元素以块级元素显示,占满剩余空间;
2. height:0 避免生成内容破坏原有布局的高度。
3. 通过 content:" "生成内容作为最后一个元素，在一些浏览器（firefox直到7.0）仍然会产生额外的空隙。Unicode字符里有一个“零宽度空格”，也就是\200B,这个字符本身是不可见的,因此我们可以使用这个字符。或，最后加个属性（visibility:hidden）。
   参考：
4. https://segmentfault.com/a/1190000004865198
5. http://www.iyunlu.com/view/css-xhtml/55.html

定位方式

• 继承父元素
  inherit
• 默认定位
  position: static：元素使用正常的布局行为，即其在文档流中的当前布局位置（也就是说忽略top bottom left right Z-index声明）
• 相对定位
  position: relative：参考点为元素本身正常位置，相对于此位置而进行定位，但其实际位置仍为原文档流位置，只是看起来位置变了。使用场景即不想影响之后其他元素的位置。
• 绝对定位
• position: absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位，位置通过top bottom left right进行规定。脱离文档，不再占据文档中的空间，其他元素会填充原本的空间。使用场景：当想忽略其位置而进行定位时。
• postion: fixed：固定定位，脱离文档流，不再占据原空间。参考点为浏览器窗口。会随着屏幕滚动条滚动而移动，故使用场景为随屏幕而移动悬浮。
  下图为相对定位relative和绝对定位absolute的区别
  定位区别.png
  链接为以上几个定位的实际效果：定位效果

Z-Index

不引入Z-Index时的情况：（1-5依次从最底部到顶部）

1. 根元素的背景与边框
2. 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
3. 浮动块元素
4. 常规流中的后代行内元素
5. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠

不引入时.png

注：图中"no position"在左边a（红色）块之上，d（橘色）之下，完全符合3 4 5的顺序。

JSBin地址

引入Z-Index后

注：z-index只对指定了 [position]属性为非static的元素有效。

引入Z-Index后.png

• 当没有指定 z-index 的时候， 所有元素都在会被渲染在默认层(0层)。
• 当多个元素的 z-index 属性相同的时候(在同一个层里面)，那么将按照没有引入z-index时的规则进行布局。
• 该图元素 div#5 的 z-index 无效， 因为他没有被指定 position 属性。

如何形成层叠上下文

文档中的层叠上下文由满足以下任意一个条件的元素形成：

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• [opacity]属性值小于 1 的元素。
• [transform]属性值不为 "none"的元素。
• [mix-blend-mode]属性值不为 "normal"的元素。
• [filter]值不为“none”的元素。
• perspective]值不为“none”的元素。
• [isolation]属性被设置为 "isolate"的元素。
• position: fixed。
• 在 [will-change]中指定了任意 CSS 属性，即便你没有直接指定这些属性的值。
• [-webkit-overflow-scrolling]属性被设置 "touch"的元素。

总结

层叠顺序.png

• 判断准则：
• 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
• 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
• z-index:0所在的<div>元素是层叠上下文元素,而z-index:auto所在的<div>元素是一个普通的元素。两个前者做比较，依照后来居上；两个后者做比较，依照谁大谁上。
• z-index只对指定了position为非static属性的元素有效。
• z-index的数值大的元素会覆盖到小的上面。
  参考：

1. http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
2. https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index
3. https://github.com/norvca/blog/issues/11

Position:relative和负Margin的区别

• Position:relative相对于元素本身所在位置进行定位，产生偏移。但事实上元素所处位置并没有改变，只是看起来偏移了。后面的元素仍在原来的位置不动。
• 负Margin改变了元素原来所处的位置。后面的元素会相应作出移动。
  JSBin地址

relative和负margin.png

BFC

BFC（Block Format Context）：块级格式化上下文，是Web页面的可视化CSS渲染的一部分。它是块盒子的布局发生，浮动互相交互的区域。

• 如何生成
  一个块级格式化上下文由以下之一创建：
• 根元素或其它包含它的元素
• 浮动 (元素的 float 不是 none)
• 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 inline-blocks (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 块元素具有overflow ，且值不是 visible
• display: flow-root
  或者简单来看，如表格：

属性	值
float	left ; right （即不为none）
overflow	hidden ; auto ; scroll （不可为visible）
display	table-cell ; table-caption ; inlin-block ; flow-foot
position	absolute ; fixed

元素拥有这些属性后，便会建立块级格式化上下文。

• 特性
• 阻止垂直外边距合并。
  注：使用overflow时需要在元素外面加个父元素包裹，并给父元素设置overflow:hidden，其他方法不需要如此，直接给元素设置即可（例中便为此情况）。
  例：
  JSbin地址-阻止垂直外边距合并

阻止外边距合并.png

• BFC不会重叠浮动元素。
  例：
  JSbin地址-不重叠浮动元素

不重叠浮动元素.png

• BFC可以包含浮动。
  例：
  JSbin地址-包含浮动

包含浮动.png

外边距合并

• 发生外边距塌陷的三种基本情况:
• 相邻的兄弟元素
• 块级父元素与其第一个/最后一个子元素
  如果块级父元素中，不存在上边框、上padding、inline content、 清除浮动 这四条属性（对于上边框和上padding，也可以说，当上边距及上padding宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
• 空块元素
  如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
• 外边距如何合并
• margin 都为正值，则取较大的 margin 值。
• margin 一正一负，则取相加后的数值。
• margin 都为负值，则取负值绝对值较大的 margin 值，此时 margin 为负值。
• 阻止相邻元素外边距合并
  使其中一个元素形成块级格式化上下文即可，详见上一章BFC。
• 父子外边距合并范例
  JSBin-父子外边距合并

父子外边距合并.png

代码

1. alert效果
2. 信息收集表
3. 模态框
4. 导航栏