边距冲突

当top margin碰到 bottom margin， 浏览器会取较大的那个值

解决方案：

• 使用top padding
• 加一条border

水平边距不会和浮动元素之间的边距发生这样的折叠，绝对定位和相对定位的元素也不会发生折叠

行内盒子 和 块级盒子

top/bottom padding/margin对行内盒子无效

• img标签例外（虽然它也是行内元素），但padding和margin会使它变高
• 浮动的行内元素会被当作块级元素处理

画圆

border-radius: 20%;
border-radius: 20px/40px;

清除浮动

clear属性接受以下选项：

• left. 样式将落至左浮动元素的下方， 但是仍将环绕右浮动的对象
• right。强迫样式落至右浮动对象的下方，但是仍将环绕左浮动的对象
• both。 强迫样式落至左浮动和右浮动的元素下方
• none。完全关闭清除属性，换句话说它会让项目包围左浮动和右浮动的对象，这也是web浏览器的默认方式