-
浮动：元素向左或右移动，直到碰到父容器边框或者下一个浮动元素
-
清除浮动：因为浮动元素会脱离文档流，所以会导致页面元素的重叠。而且如果一个父元素只包含浮动元素，会导致父元素高度崩塌（高度为0），比如ul内的所有li元素都浮动时，ul高度会变为0。解决办法是在ul上加上
overflow:hidden，具体原理这里不详述。 -
另外一种方式是使用
clear:both。具体做法是添加伪类 ，而且这个样式必须加在浮动元素层的最外层1 2 3 4 5
.clearfix::after{ clear:both; content:'', display:table }
表示在clearfix类元素后添加一个空的元素，该元素使用table块显示，并且不与浮动元素相邻，以达到清除浮动的效果。
-
inline：设置为行内显示。此时不能设置元素的width和height，且margin、padding的top和bottom都不能设置（设置了也无效），父元素的高度完全是由子元素的内容撑起来的。
-
box：设置为块显示。所有的边距和高度、宽度都能设置。宽度未设置时默认为100%，即填满父容器。常用在li下的a标签上，可以让a标签充满整个li，这样的话只要在a上设置样式即可。
-
inline-box：与inline类似，但是所有的边距和高度、宽度都能设置。所以一般用inline-box。
-
box-sizing：css3新增， 默认为content-box，此时元素的实际宽高 = 元素内容宽高 + 内外边距 + border。
-
border-box：元素的实际宽高 = 设置的宽高。 元素实际内容的大小会自动用设置的宽高 - 内边距 - border 得到。(注意：不包括margin)。这种方式在布局时非常常用，比如将2个div放在一行内。
