边距冲突
当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浏览器的默认方式