前端样式实践出真知系列（一）

1、float:对前面的元素不会有影响，无论是块级元素还是行内元素的float，对后面的元素的影响都是：先假设当前元素不存在，后面元素的位置应该是什么样子的，然后再考虑下，float后的元素的大小是其真正的大小（即使是块级元素，大小=内容+padding+border+margin），这个大小会对后一个元素形成挤压。

（备注：float和postion：absolution的主要区别是前者不会后受影响的内容重叠，会形成挤压，后者会重叠，相当于在另一个层上。）

使用float和postion：absolution的元素的宽高都不会影响父元素的宽高，因为已不属于父元素内容的一部分。

2、很多元素尤其默认的属性，我们经常需要对其进行格式化（如dd默认右外边距-webkit-margin-start: 40px;）

3、父容器（如div），大小固定时，子容器（未设宽度时，默认父容器的宽度）内容超过父容器宽度时就会自动换行，除非子容器显示定义了宽度（可能比父容器宽，但父容器宽度不会随之增大）。

4、元素类型：inline和block,即行内元素和块级元素，这里有个要注意的点： inline类型的无法指定宽（width）和高（height）。padding（内边距）和margin（外边距）可以被应用到inline显示的元素，但是不会影响包含的元素。

除了inline和block类型的显示，这里还有一个inline-block的显示方式。它显示的方式类似于inline，但是它相关的属性，例如，宽度，高度还有padding/margin等等遵循于block显示类型的规则。inline-block可以帮助我们实现类似float元素的效果，但是也有自己的问题。