css扁平化博客学习总结（四）content代码实现_html/css_WEB-ITnose

2.一旦子元素浮动，父元素就会探索到一个合适的值，现在的值就是0，需要进行清除浮动操作。

常用的清除浮动方法：

.article-preview:after {

　　content:"";

　　display:block;

　　height:0;

　　visibility:hidden;

　　clear:both;

}

.article-preview{*zoom:1;}

还有可以写成这样：

.article-preview:after {

　　content:"\200B";/＊Unicode字符里有一个“零宽度空格”，也就是U+200B，它本身是不可见的，所以可以省略掉 visibility:hidden ＊/

　　display:block;

　　height:0;

　　clear:both;

}

.article-preview{*zoom:1;}

另一种最新式方法：

.clearfix{

overflow: auto;

room: 1; //支持IE6

}

还有一种：

.article-preview:before,.article-preview:after {

　　content:"";

　　display:table;

}

.article-preview:after { clear:both; }/* For IE 6/7 */

.article-preview{*zoom:1;}

3.有时候两个模块之间会出现小缝隙，很可能是字体导致。在最外层加一个font-size: 0;进行处理。

4.每个元素里的内容，随着窗口变化，该元素扩大或缩小的时候，进行自适应。

.text-section > div{
　　word-wrap: break-word; /*允许对长的不可分割的单词进行分割并换行到下一行*/
　　word-break: break-all;　　/*规定非中文的换行规则，允许内容自动在单词内换行*/
　　overflow: hidden;　　/*超出的内容隐藏*/
　　text-overflow: ellipsis;　　/*超出的内容显示省略符号，clip直接修剪文本，string使用给定的字符串代表被修剪的文本*/
}

5.purple-section布局