标准文档流
块级元素 ： 独占一行
h1~h6 p div 列表...
行内元素 ： 不独占一行
span a img strong...
display
也是一种实现行内元素排列的方式，但是我们很多情况通用float
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行
none
代码：
html：
css：
/*
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行
none
*/
?
div{
width: 100px;
height: 300px;
border: 2px solid #779dbd;
display: none;
}
?
span{
width: 100px;
height: 300px;
border: 2px solid #779dbd;
display: block;
}
浮动
html：
css：
div{
width: 200px;
height: 500px;
border: 2px solid red;
}
?
div:nth-of-type(1){
display: inline-block;
float: left;
}
?
div:nth-of-type(2){
display: inline-block;
float: right;
}
?
div:nth-of-type(3){
display: inline-block;
float: left;
}