一.标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
二.display属性display:更改块级元素和行内元素的相互转换
block：块级元素的默认值 inline：行内元素的默认值 inline-block:同时具有行内和块级元素的特性 none：隐藏元素内容三.float浮动
left 元素向左浮动
right 元素向右浮动 none 默认值。元素不浮动，并会显示在其文本中出现的位置 <style type="text/css"> .layer01{ float: left; } .layer02{ float: right; }</style>
四.clear清除浮动
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素 both 在左、右两侧不允许浮动元素 none 默认值。允许浮动元素出现在两侧 <style type="text/css"> .layer01{ clear:left; } .layer01{ clear:right; } .layer01{ clear:both; } </style>五.解决父级边框塌陷的方法
1.浮动元素后面加空div
<div class="layer05"> <style type="text/css"> .layer05{ clear: both; }</style>
2.设置父元素的高度
<style type="text/css"> #father{ height: 500px; } </style>3.父级添加overflow属性
visible 默认值。内容不会被修剪，会呈现在盒子之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 <style type="text/css"> #father{ overflow: hidden; } </style>4.父级添加伪类after
<div id="father" class="clear"></div> <style type="text/css"> .clear:after{ content: ''; /*在clear类后面添加内容为空*/ display: block; /*把添加的内容转化为块元素*/ clear: both; /*清除这个元素两边的浮动*/ } </style>六.inline-block和float的区别
display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便 位置方向不可控制，会解析空格 IE 6、IE 7上不支持 float 可以让元素排在一行并且支持宽度和高度，可以决定排列方向 float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式