浮动及其使用

标准文档流：
    指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
标准文档流组成
    块级元素（block）
        <h1>…<h6>、<p>、<div>、列表
    内联元素（inline）设置不了宽高
        <span>、<a>、<img/>、<strong>...
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

display属性

值                说明
block            块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline            内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 
inline-block        行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none            设置元素不会被显示

浮动
float属性
属性值            说明
left            元素向左浮动
right            元素向右浮动
none            元素不浮动

清除浮动
clear属性
值            说明
left            在左侧不允许浮动元素
right            在右侧不允许浮动元素
both            在左、右两侧不允许浮动元素
none            默认值。允许浮动元素出现在两侧

解决父级边框塌陷的方法
浮动元素后面加空div
<div class="clear"></div>
.clear{  clear: both;  margin: 0; padding: 0;}

溢出处理
overflow属性

属性值            说明
visible        默认值。内容不会被修剪，会呈现在盒子之外
hidden        内容会被修剪，并且其余内容是不可见的
scroll        内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto        如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

清除浮动，防止父级边框塌陷的四种方法
    浮动元素后面加空div
        简单，空div会造成HTML代码冗余
    设置父元素的高度
        简单，元素固定高会降低扩展性
    父级添加overflow属性
        简单，下拉列表框的场景不能用
    父级添加伪类after
        写法比上面稍微复杂一点，但是没有副作用，推荐使用

inline-block和float的区别
display:inline-block
    可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
    位置方向不可控制，会解析空格
    IE 6、IE 7上不支持
float 
    可以让元素排在一行并且支持宽度和高度，可以决定排列方向
    float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式