3月9日

如何清除浮动

清除浮动
清除浮动的底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。

要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。

清除浮动的最佳实践

.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }

BFC的主要特征

✦ BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
✦ BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：
✦ float 为 left | right
✦ overflow 为 hidden | auto | scorll
✦ display 为 table-cell | table-caption | inline-block | flex | inline-flex
✦ position 为 absolute | fixed

总结

有很多方法可以进行清除浮动这样的操作，归根到底，从原理上讲其实分为两种。

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性。（after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素）；

其二，使父元素触发BFC。（通过设置父元素 overflow 或者display：table 属性来闭合浮动）

static静态定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top,bottom,right,left属性的影响。

fixed固定定位

• 脱离标准流，在页面中不占位置 。
• 不管页面有多大，永远相对于浏览器的边框来定位 。

relative 相对定位

• 不脱离标准流，在页面中占位置 。
• 相对于自己原来的位置来进行定位 。

absolute绝对定位

• 脱离标准流，在页面中不占位置（浮起来）。
• 如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。

定位元素的重叠

• z-index属性控制定位元素的重叠顺序，属性值是z轴上的值。
• Z-index只能在绝对定位元素上奏效（position:absolute）。
• Z-index的值是设置一个定位元素沿Z轴的位置，其值越大，离用户越近，所以若两个定位元素，Z-index值越大的将会覆盖值越小的定位元素。
  默认值是0，可以是正负数。
  下面首先不设置z-index。