1.浮动float

　　div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性，就会变成块级标签。

<style>

    \* {  
        margin: 0px;  
        padding: 0px;  
    }

    .c1 {  
        height: 1000px;  
        width: 20%;  
        background-color: darkslategrey;  
        float: left;    /\* 使用浮动属性，将div1和div2两个块级标签横向推挤在一起。如果两个标签能够摆在一排，就会浮动到一起  \*/  
    }

    .c2 {  
        height: 1000px;  
        width: 80%;  
        background-color: black;  
        float: left;  
    }

</style>  

2.清除浮动clear属性

（1）利用伪元素具有clear清除浮动的属性来解决父标签塌陷的问题（父标签撑不起来的问题）

<style>  
    /\* 通用样式将整个浏览器的外边距与内边距设置为0 \*/  
    \* {  
        margin: 0;  
        padding: 0;  
    }

    #d1 {  
        border: 1px solid black;  
    }

    .c1,  
    .c2 {  
        float: left;    /\* 左浮动 \*/  
        height: 100px;  
    }

    /\*.c3 {\*/  
        /\*!\*height: 100px;\*!\*/  
        /\*clear: left;\*/  
    /\*}\*/

    /\* 在d1这个标签的最后加一个伪元素,伪元素的内容为空，但具有清除浮动的属性，解决了父标签塌陷问题\*/  
    #d1:after {  
        content: "";  
        clear: left;  
        display: block;  
    }  
</style>

3.overflow溢出属性

（1）利用overflow溢出属性做圆形头像的例子