css tips: 清除float影响，containing的div跟随floated sub等

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

z-index只能在被position为： aboslute, fixed, relative的元素生效

不能对一个元素既设置float，又设置positioning,因为这会产生positioning歧义。当然特别需要时也是可以同时设置这两者的。比如被float的元素本身又作为container，希望他作为子元素定位的参考点，则可以设置float:left;position:relative

默认情况下：任何元素都有默认的background属性：transparent，元素的border以内都认为是background的涵盖范围。一旦设置了brackground，它就称为背景色，可以由border,content来“覆盖”。

.background{

　　background-image: url(imag/background.jpg);

　　background-color: blue; //作为fallback

　　background-repeat: no-repeat;

　　background-position: top center;

　　background-attachment: scroll//默认；fixed;local：指示content是否和background一起scroll

}

background-gradient color generator: http://www.colorzilla.com/gradient-editor/

inline-block元素的上下对齐可能是一个问题，可行的办法是设置vertical-align: top

另外在使用两个inline-block A:60%,B:40%的情况下，可能会出现A+B>100%从而B被挤下来的问题，产生这个问题的原因是浏览器会将A和B之间的whitespace空白或者tab键渲染为1px左右的内容，解决方案要么A+B<100%,要么：设置B margin-right: -5px就解决了。

另外一个常见的bug是：如果网页内容不是很饱满，footer就孤零零在网页中间而不是在网页的底部，解决办法就是将main layout component设置height:100%

转载于:https://www.cnblogs.com/kidsitcn/p/4816627.html