块级元素：独占一行
h1~h6 p div 列表…

行内元素： 不独占一行
span a img strong …

行内元素可以被包含在块级元素中，反之则不可以

display：

<!--    block  块元素
        inline  行内元素
        inline-block   是块元素但是可以内联，在一行！
        -->

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;

        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }


    </style>

这个也是实现行内元素排列的方式，但是我们很多情况用float

float：
左右浮动 float

#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}

.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

父级边框塌陷问题：
clear

/*
clear: left;  左侧不允许有浮动元素
clear: right;  右侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素

*/

解决方案：
1.增加父级元素的高度

#father{
    border: 1px #000 solid;
    height: 800px;
}

2.增加一个空div标签，清除浮动

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3.overflow
在父级元素中增加一个 overflow: hidden;

4.父类添加一个伪类：after

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结：
1.浮动元素后面增加一个空div
简单，代码中尽量避免空div

2.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制

3.overflow
简单，下拉的一些场景避免使用

4.父类添加一个伪类：after（推荐）
写法稍微复杂，但没有副作用

对比：

display：
方向不可控制

float：
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题