display和浮动

浮动

标准文档流

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

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

display

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

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

float

div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border:1px solid #000;
        }
        .layer01{
            border:1px #F00 dashed;
            display: inline-block;
            float: right;
        }
        .layer02{
            border: 1px #00F dashed;
            display: inline-block;
            float: right;
        }
        .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;
        }