浮动元素
- 浮动元素的特征
其框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘 - 影响
因为浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样，所以，
对父容器而言，若子元素都为浮动元素，浮动方向一致，父容器此时高度为0；
对其他浮动元素，如果包含块儿（父容器）太窄无法容纳水平排列的多个浮动元素，那么其他浮动元素（块）向下移动，直到有足够的空间，如果浮动元素的高度不同，那么向下移动的时候可能被卡住
普通元素（的框）会表现的像浮动元素不存在，但元素框内的文本内容会受到浮动元素的影响，会移动以留出空间
清除浮动
父容器未给定高度或高度为auto时，其子元素为浮动元素，此时，容器的高度不能自动伸长以适应内容高度，内容会溢出到容器外面而影响布局，表现的像是父容器高度坍塌，未解决这一问题，需要针对性的对元素清理浮动
- 方法
- 利用clear属性 在浮动元素后使用一个空元素如
<div class="clear"></div>，并在css中设置.clear{clear:both;}即可清除两侧浮动，或者，给浮动元素后面的元素添加clear属性 - 使父容器形成BFC（块级格式化上下文）
包括，给浮动元素的容器添加overflow:hidden;或overflow:auto;，或者，给浮动元素的容器也添加浮动属性（但会使其整体浮动，影响布局）
- 利用clear属性 在浮动元素后使用一个空元素如
定位
基本属性
| 值 | 属性 |
|---|---|
| inherit | 规定应该从父元素继承position的值 |
| static | 默认值，没有定位，元素出现在正常的文档流中 （忽略 top bottom left right 或者 z-index声明） |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位，例如left:20px;会向元素的left位置添加20px |
| absolute | 生成绝对定位的元素，相对于除static定位以外的第一个祖先元素(offset parent)进行定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定 |
| sticky | CSS3新属性，类似于position:relative;和position:fixed;的合体，当目标区域在屏幕中可见时，表现的像position:relative;；当页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置 |
z-index
z-index属性指定了一个元素及其子元素的z-order。当元素之间重叠时，z-order 决定哪一个元素覆盖在其余元素的上方显示。通常来说 z-index 较大的元素会覆盖较小的一个
对于一个已经定位的元素（即position属性值是非static的元素），z-index属性指定：
- 元素在当前堆叠上下文中的堆叠层级
- 元素是否创建一个新的本地堆叠上下文
position:relative;与margin负值
-
position:relative;
使元素偏移的原因：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动，但是，偏移后的元素仍然保持其定位前的形状，它原本所占的位置会保留 - margin负值
当元素width未给定值或width为auto时，负margin会增加元素的宽度，但margin-top负值不会增加高度，只会产生向上偏移，margin-bottom负值不会产生位移，会减少自身的供css读取的高度
元素使用负margin偏移后，其后的元素会补位，即，不会破坏页面的文档流
BFC(块级格式化上下文)
BFC是块级盒布局出现的区域，也是浮动层元素进行交互的区域
一个块级格式化上下文由一下之一创建：
- 根元素或其他包含它的元素
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素具有 position 为 absolute 或 fixed）
- 内联块（元素具有 display: inline-block）
- 表格单元格（元素具有 display: table-cell，HTML表格单元格默认属性）
- 表格标题（元素具有 display: table-caption，HTML表格标题默认属性）
- 具有overflow 且值不是 visible 的块元素
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有column-span: all 的元素并不被包裹在一个多列容器中
W3C相关定义：
在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直地间隙是由它们的 margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生重叠。
在块级格式化上下文中，每一个盒子在左外边缘（margin-left）会触碰到容器的左边缘（border-left）（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
特性
除了定义里提到的
- BFC的区域不会与浮动的盒子叠加
- BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之亦然
- 计算BFC的高度时，浮动元素也参与计算
如何运用BFC
- 解决margin叠加问题
未添加overflow时，两个p标签上下间隔为100px，margin发生重叠
-
用于布局
布局
-
用于清除浮动，计算BFC高度
清除浮动
外边距合并
块的顶部外边距和底部外边距有时被组合（折叠）为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷（margin collapsing），也称外边距合并
外边距合并也分三种情况：
- 相邻的兄弟姐妹元素
毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。例如
<p style="margin-bottom: 30px;">这个段落的下外边距被合并</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并</p>
示例中两个段落中间的距离，不是“上面段落的下边距”与“下面段落的上边距”的和，而是两者中的较大者（即为示例中的30px）
- 块级父元素与其第一个/最后一个子元素
如果块级父元素不存在上边框、上内边距、内联元素、清除浮动这四条属性（即当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就会“挨到一起”，此时块级父元素和其第一个子元素会发生上外边距合并，此时，这个父元素对外展现出来的外边距将直接变为这个父元素和其第一个子元素的margin-top的较大者
类似的，块级父元素的margin-bottom与其最后一个子元素的margin-bottom之间没有父元素的border、padding、inline content、height、min-height、max-height分隔时，就会发生下外边距合并的现象
<div class="box-wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
父子外边距合并
- 空块元素
如果一个空的块级元素，其border、padding、inline content、height、min-height都不存在，那么此时它的上下边距中间没有任何阻隔，此时它的上下外边距将会合并。例如：
<p style="margin-bottom: 0px;">这个段落和下面段落的距离将为20px<p>
<div style="margin-top: 20px; margin-bottom 20px:;"></div>
<p style="margin-top: 0px;">这个段落和上面段落的距离将为20px<p>
因此，上述情况发生时，外边距合并会更加复杂（需要比较两个以上外边距来最终结算出真实的边距值）
即使外边距为0，这些规则也仍旧生效！因此，无论父元素的外边距是否为0，第一个或最后一个子元素的外边距会被父元素的外边距“截断”，在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距（负边距中绝对值最大的）之和
如何让相邻元素外边距不合并
- 使用 display: inline-block;
- 使用浮动
- 相邻元素同属一个BFC时，给它们之间添加阻挡（边框、非空内容、padding等），或者让他们不在同一个BFC内
网友评论