《CSS世界》第六章 流的破坏与保护总结

《CSS世界》第六章 流的破坏与保护总结 author: @TiffanysBear

float属性

float的本质与特性

1.包裹性（包含包裹和自适应）

2.块状化并格式化上下文

3.破坏文档流

4.没有任何margin合并

float的作用机制

float属性使父元素高度塌陷，为了实现文字环绕效果。高度塌陷是为了让跟随的内容可以和浮动元素在一个水平线上。（行框盒子在正常定位状态下只会跟随浮动元素，不会发生重叠）

clear属性

clear属性让自身不能和前面的浮动元素相邻。clear属性只有块级元素才有效。

如果clear: both;元素前面的元素就是float元素，则margin-top负值即使设置成-9999px，也没有任何效果；

clear: both; 后面的元素依旧可能会发生文字环绕现象。

BFC

BFC定义

通过一些特定的手段形成的封闭空间，即BFC元素内部不会影响外部的元素。可以用来防止margin重叠，清楚浮动防止父元素高度坍塌。

触发BFC条件

• 根元素；
• float的值不为none；
• overflow的值为auto、scroll或hidden；
• display的值为table-cell、table-caption和inline-block中任何一个；
• position的值不为relative和static；

各个BFC优缺点

• float，浮动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应行。
• position: absolute; 脱离了文档流。
• overflow: hidden; 容器盒子外的元素可能会被隐藏掉。
• display: inline-block; IE6、7下完美，因为即BFC化又保持block也行，保留了流体特性。但在其他浏览器下会让元素尺寸包裹收缩。

overflow

overflow裁剪的边界是border box的内边缘，而非padding box的内边缘。

overflow-x和overflow-y属性中一个值设置为visible而另一个设置为scroll、auto或者hidden，则visible的样式表现会如同auto。除非 overflow-x和overflow-y 属性值都是visible，否则会当成auto来解析。

// 单行文字省略号
.ell {
	text-overflow: ellipsis;
	white-space: nowarp;
	overflow: hidden;
}

// 多行文字省略号
.ell-rows-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

overflow与锚点定位

锚点定位行为的触发条件

• URL地址中的锚链与锚点元素对应（a标签以及name属性）并有交互行为
• 可focus的锚点元素处于focus状态

锚点定位的本质通过改变容器滚动高度或者宽度实现的。锚点定位发生在普通容器元素上，定位行为是由内而外的。

设置了overflow: hidden;的元素也是可以滚动的，只是滚动条不见了而已。

绝对定位

绝对定位特性

• 块状化
• 破坏性
• 块状格式上下文
• 包裹性、自适应性

absolute的包含块

• 根元素被称为“初始包含块”，其尺寸等同于浏览器可是窗口的大小。
• 对于其他元素，如果该元素的position是relative或者static。则“包含块”由最近的块容器祖先盒的content box边界形成。
• 如果元素position: fixed;则包含块是初始包含块。
• 如果元素position: absolute，则包含块由最近的position不为static的祖先元素建立，由该祖先的padding box边界形成。

无依赖absolute定位的相对特性

absolute是非常独立的CSS属性值，其样式和行为表现不依赖其他任何CSS属性就可以完成。单独设置position: absolute; 本质上是相对定位，只不过不占据CSS流的尺寸空间而已。

可以利用该特性实现“图片和文字水平对齐”，“表单提示词”等效果。

absolute与text-align

text-align会改变absolute元素的位置，本质是“幽灵空白节点”和“无依赖绝对定位”共同作用的结果，具体就是由于绝对定位元素不占据CSS流中的尺寸空间，表现为一个“空白节点”，这时text-align使该节点居中，因此效果就是绝对定位元素偏右了。注意，只有原本是内联水平的元素才有这种情况

absolute与overflow

绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。

absolute与clip

当position: fixed;overflow属性就不可用了，除非根元素。这时可以使用clip来进行剪裁。

// 这种方式既满足视觉上的隐藏，屏幕阅读器等辅助设备又支持很好（display: none;不识别或者不可focus）。移动端中可以使用透明度为0.
.clip {
	position: absolute;
	clip: rect(0 0 0 0);
}

clip隐藏仅仅决定了那部分可见，非可见部分不响应点击事件等；虽然视觉上隐藏了，但是元素的尺寸还是不变的，在IE、firfox中抹掉了不可见区域对布局的影响，chrome没有这种问题。

absolute的流体特性

当对立方向同时发生定位时，表现为格式化宽度，自适应包含块的padding box。具备自适应性。

margin: auto;可以让绝对定位元素居中。条件是对立方向同时发生定位。

相对定位

相对定位的left/top等的百分比是相对于包含块计算的，而不是相对自身。

对立方向同时发生定位时，只有一个方向的定位属性起作用。

固定定位

与无依赖绝对定位相同，也存在无依赖固定定位。