开发常用CSS大总结 -2

BFC 应用之消除浮动的影响

清除浮动可用clear: both和overflower:hidden.

现在有多了一个方法display: flow-root; 然后兼容低版浏览器问题，解决方法

.wrapper{display: flow-root;} 
@supports not (display:flow-root) { 
    .wrapper::after { content: ''; display: table; clear:both; }
}

.clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.clearfix:after,
.clearfix:before {
    content: '';
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

粘性定位

position:sticky，粘性定位要起作用，需要设置最后滞留位置。chrome 有 bug，firefox 完美

position:sticky是position:relative和position:fixed的结合体

• 当元素在屏幕内，表现为 relative，
• 就要滚出显示器屏幕的时候，表现为 fixed

position:sticky 有个非常重要的特性，那就是sticky元素效果完全受制于父级元素们。

这和 position:fixed 定位有着根本性的不同，fixed 元素直抵页面根元素，其他父元素对其 left/top 定位无法限制。

• position:sticky父级元素不能有任何 overflow:visible 以外的 overflow 设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。

• 父级元素也不能设置固定的 height 高度值，否则也没有粘滞效果。

• 同一个父容器中的 sticky 元素，如果定位值相等，则会重叠；如果属于不同父元素，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。

• sticky 定位，不仅可以设置 top，基于滚动容器上边缘定位；还可以设置 bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置 left 和 right 值。

  • 设置 top 粘滞的元素随着往下滚动，是先滚动后固定；而设置 bottom 粘滞的元素则是先固定，后滚动