web页面和photoshop等设计软件有本质区别，web页面的制作是个“流”，必须从上而下，而设计软件，想往哪里画都可以。
标准流的微观现象：
1）空白折叠现象：
如果想让img标签之间没有空隙，必须紧密连接：
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />2）高矮不齐，底边对齐
3）自动换行，一行写不满，换行写。
块级元素和行内元素
标准文档流等级森严，分为两种：
1）块级元素
霸占一行，不能与其他任何元素并列
能接受宽、高
如果不设置宽度，那么宽度将默认变为父亲的100%
2）行内元素
与其他行内元素并排
不能设置宽、高。默认的宽度就是文字的宽度。
在html中，我们已经将标签分为文本级和容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
在CSS中，所有的文本级标签都是行内元素，除了p是文本级（但p是个块级元素）。所有的容器级标签都是块级元素。
块级元素和行内元素的相互转换：块级元素可以设置为行内元素，行内元素可以设置为块级元素。
div{
display: inline;
background-color: lightpink;
width: 500px;
height: 500px;
}display是用来改变元素的行内、块级性质。inline就是行内。
一旦给一个标签设置display: inline; 那么这个标签将立即变为行内元素，此时它和一个span无异，此时这个div不能设置宽度和高度，这个div可以和别人并排了。
同样，
span{
display:block;
width: 200px;
height: 200px;
background-color: pink;
}block就是块的意思。让标签变为块级元素，此时这个标签与一个div无异：这个span能够设置宽度和高度；必须霸占一行，别人无法和它并排；如果不设置宽度，将撑满“父亲”。
标准流里面限制非常多，所以CSS中有三种手段使一个元素脱离标准文档流：
1）浮动
2）绝对定位
3）固定定位
浮动 是CSS里布局用的最多的属性
<style type="text/css">
.box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
float: left;
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>两个元素并排了，并且两个元素都能够设置宽度和高度，而这在刚才的标准流中无法实现。
浮动的三个性质：
1.浮动元素脱标
<style type="text/css">
.box1{
float: left;
width: 200px;
height: 100px;
background-color: yellowgreen;
}
.box2{
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>绿色盒子float: left; 蓝色盒子没有float。绿色的盒子脱离了标准文档流，那么蓝色盒子就是现在标准文档流中的第一个盒子，所以会渲染在页面的左上方。
一个span标签不需要转成块级元素就能够设置宽度和高度，说明所有标签已经不区分行内和块了。一旦一个元素浮动了，无论以前是div还是span，都将能够并排且设置宽高。
如下：
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}2.浮动的元素互相贴靠
左浮动：
<style type="text/css">
body{
font-size: 60px;
}
.box1{
float: left;
width: 100px;
height: 400px;
background-color: yellowgreen;
}
.box2{
float: left;
width: 120px;
height: 420px;
background-color:skyblue;
}
.box3{
float: left;
width: 140px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>在以上代码中，如果空间足够，box3会贴着box2，但当浏览器窗口不够大的时候，box3会贴着box1，如果没有足够的空间贴着box1，则box3单独贴着左浏览器边框。
右浮动：（比较少使用）
<style type="text/css">
.box1{
float:right;
width: 100px;
height: 400px;
background-color: yellowgreen;
}
.box2{
float: right;
width: 120px;
height: 420px;
background-color:skyblue;
}
.box3{
float: right;
width: 100px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>3.浮动元素有字围效果：
<style type="text/css">
div{
float: left;
width: 20px;
height: 20px;
background-color: orange;
}
p{
background-color: yellowgreen;
}
</style>
</head>
<body>
<div>1</div>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。
浮动和父子盒模型：
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width: 400px;
height: 400px;
background-color:lightpink;
padding：100px;
}
.para1{
float:left;
width:300px;
height:300px;
background-color:yellowgreen;
}
.para2{
float:left;
width:100px;
height:100px;
background-color:skyblue;
}
</style>
</head>
<body>
<div>
<p class="para1">mayday</p>
<p class="para2">五月天</p>
</div>
</body>div的真实宽为400，所以para1和para2的宽の和不能大于400。
如果其他数值不变，在para2中增加padding（如下），则宽高也会大于div标签。
.para2{
float:left;
width:300px;
height:300px;
padding:10px;
background-color:skyblue;
}浮动元素如果没有width将自动收缩为文字的宽度
比如：
<style type="text/css">
div{
float:left;
background-color:gold;
}
</style>这个div浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度。