浮动

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列放式
内联标签可以包含于快及标签中，成为他的元素，而反过来则不成立
block：快级元素的默认值，元素会被显示为块元素，该元素前后会带有换行符
inline：内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符
inline-block：行内快元素，元素既具有内联元素的特征，也有快级元素的特征
none：设置元素不会被显示
示例：display：block；
display：inline；
display：inline-block；
display：none；
display的特性：快级元素与行级元素的转变（block,inline）
控制快级元素排到一行（inline-block）
控制元素的显示和隐藏（none）
浮动
float属性
清除浮动：clearfix：：before，
clearfix：：after{
content：""；
display：block
clear：both；
}
边框塌陷：
layer04设置宽度和右浮动后，为什么边框塌陷了？怎么解决？
浮动元素脱离标准文档流
清除浮动
clear属性
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值，允许浮动元素出现在两侧
示例：{
clear：both；
}
解决边框塌陷得方法：
浮动元素后面加空的div
设置父元素的高度
父级添加overflow属性
父级添加伪类after
溢出处理：
overflow属性
visbie 默认值，内容不会被修建，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
srcoll 内容会被修建，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
小结：
清除浮动，防止父级边框塌陷的四种方法？
浮动元素后面加空的div：简单，空的div造成HTML代码冗余
设置父元素的高度：简单，元素固定高会降低扩展性
父级加overflow属性：简单，下拉列表框的场景不能用
父级添加伪类after：写法上比上面稍微复杂一点，但是没有副作用（推荐使用）
inline-block和float的区别
display：inline-block：
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE6、IE7上不支持
float：
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float浮动以后元素脱离文档流，会对周围元素产生影响，必须在他的父级上添加清楚浮动的样式