CSS布局

1、布局

1) 默认文档流
    1. 元素在网页中显示的顺序与元素在代码中出现的顺序一致
    2. 块级元素独占一行空间
    3. 行内元素与其他元素共享一行空间

2) 改变默认布局
    1. float：left/right
        浮动布局，采用浮动布局的元素会向左或者向右移动           
        注意：
            1、元素使用了浮动之后，会脱离文档流,从左向右排列，当前行宽度不够会自动换行
            2、使用了浮动之后的元素，宽高由内容决定
            3、元素在网页中原本的位置会被其他块级元素替代
            4、使用了浮动之后的元素，其父元素的高度由于失去了支撑，所以变为0
            
 清除浮动的方式:
    1. 
        浮动元素的父元素::after {
            clear:both;
            content:'';
            display:block;
        }
    2. 
        浮动元素的父元素 {
            overflow:hidden;
        }
    3. 
        浮动元素的兄弟元素 {
            clear:both;
            content:'';
        }