清理浮动有非常多种方式，像使用 br 标签自带的 clear 属，使用元素的 overflow。使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题，一般我们都会使用例如以下代码来清理浮动。
/* 清理浮动 */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}
其原理是。在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来。并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块加入 haslayout 来让浮动块撑高并正常影响文档流。
上面的代码应该是如今主流的清理浮动方式。如今支付宝就使用这种方式。而如今，Nicolas
Gallagher 给出了一个更简洁的方案：
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是，隐藏这个空白使用的是 display: table。
而不是设置 visibility:hidden;height:0;font-size:0; 这种 hack。
值得注意的是这里中的 :before 伪类。事实上他是来用处理 top-margin 边折叠的，跟清理浮动没有多大的关系。但由于浮动会创建 block formatting context，这样浮动元素上的另而一元素上假设刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话。应该让他们不折叠（尽管这样的情况并不常见）。
------------------------------------------------------------------------------------------------------------------------------------------------
在写一个站点的样式表的时候，都会不可避免地用到一些中文字体。比方说微软雅黑、黑体等，除非是做英文站，或者说你乐意整站都用浏览器默认的字体，那我也算服了U。在 CSS 中写入中文字体的方法一般採用 font-family:"微软雅黑","黑体";这样类似的表达方式。可是对于像 WordPress 这样须要 UTF8 编码平台来说。一个不注意没有转换编码就会导致中文字体无法依照希望的字体表形出来。所以我们能够通过英文、unicode 这样的形式来表达中文。比方说刚才的 font-family:"微软雅黑","黑体";就能够写成
font-family:"Microsoft Yahei","SimHei"; 这样看起来是不是也能够统一一点呢。
中文字体与英文、unicode 相应的太多，背也背不下来，就搜集了一张表格收藏记录一下，希望也是你想要的：
| 中文名 | 英文名 | Unicode |
|---|---|---|
| Mac OS | ||
| 华文细黑 | STHeiti Light [STXihei] | \534E\6587\7EC6\9ED1 |
| 华文黑体 | STHeiti | \534E\6587\9ED1\4F53 |
| 华文楷体 | STKaiti | \534E\6587\6977\4F53 |
| 华文宋体 | STSong | \534E\6587\5B8B\4F53 |
| 华文仿宋 | STFangsong | \534E\6587\4EFF\5B8B |
| 丽黑 Pro | LiHei Pro Medium | \4E3D\9ED1 Pro |
| 丽宋 Pro | LiSong Pro Light | \4E3D\5B8B Pro |
| 标楷体 | BiauKai | \6807\6977\4F53 |
| 苹果丽中黑 | Apple LiGothic Medium | \82F9\679C\4E3D\4E2D\9ED1 |
| 苹果丽细宋 | Apple LiSung Light | \82F9\679C\4E3D\7EC6\5B8B |
| Windows | ||
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 标楷体 | DFKai-SB | \6807\6977\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 仿宋 | FangSong | \4EFF\5B8B |
| 楷体 | KaiTi | \6977\4F53 |
| 仿宋_GB2312 | FangSong_GB2312 | \4EFF\5B8B_GB2312 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 微软正黑体 | Microsoft JhengHei | \5FAE\x8F6F\6B63\9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| Office | ||
| 隶书 | LiSu | \96B6\4E66 |
| 幼圆 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 华文楷体 | STKaiti | \534E\6587\6977\4F53 |
| 华文宋体 | STSong | \534E\6587\5B8B\4F53 |
| 华文中宋 | STZhongsong | \534E\6587\4E2D\5B8B |
| 华文仿宋 | STFangsong | \534E\6587\4EFF\5B8B |
| 方正舒体 | FZShuTi | \65B9\6B63\8212\4F53 |
| 方正姚体 | FZYaoti | \65B9\6B63\59DA\4F53 |
| 华文彩云 | STCaiyun | \534E\6587\5F69\4E91 |
| 华文琥珀 | STHupo | \534E\6587\7425\73C0 |
| 华文隶书 | STLiti | \534E\6587\96B6\4E66 |
| 华文行楷 | STXingkai | \534E\6587\884C\6977 |
| 华文新魏 | STXinwei | \534E\6587\65B0\9B4F |
非常全面吧，但也不要高兴地太早。由于我们有着人手一个规则的浏览器大军，就算是举着完美支持 CSS 大旗的 Firefox，也有不尽如人意的地方，由于 Firefox 竟然不支持以上别名。对它来说 "Microsoft Yahei" 并非微软雅黑。仅仅能反馈出浏览器默认字体的的结果，唉，浏览器太多也不好，还不如回到 IE 垄断的年代，没有比較，也就没有抱怨。
-------------------------------------------------------------------------
原文地址：https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
