31.html-浮动

文档流：
        从上到下 从左到右
            块级子元素一般在父元素中从上到下排列
            行内子元素一般在父元素中从左到右排列

浮动：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止(会挨着父元素左边或右边排列，如果之前有浮动的饿元素 会挨着浮动的元素排列)，由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动特性：
            left 左浮动
            right 右浮动
        特性：
            1.会脱离标准文档流
            2.会影响其他元素的显示方式：
                其他元素会当作浮动元素不存在
                行内元素设置了浮动之后 会被当作是inline-block元素解析
            3.块级元素浮动之后 宽度默认不会再是父元素100% 如果需要 必须手动设置
            4.如果所在父元素还有空间的话 同层级浮动的元素会彼此相邻，如果父元素剩余空间不足 就会换行显示
            5.逃不出父盒子的手掌心 不管怎么浮动，都在父盒子里面 
            如果父元素没有高度 浮动的子元素将不会撑开父元素---高度塌陷
            <!-- 行内元素不能设置宽高 设置了也不会生效 -->

清除浮动：
      同层级：
            清楚其他浮动元素带给自己的影响
            clear:left;清除左浮动
            clear:right;清除右浮动
            clear:both;清除浮动
      嵌套：
             /* 1.给父元素加height ：height: 300px; */
             /* 2.BFC布局：overflow: hidden;
                                   display: inline-block; */
            /* 3.在父元素的浮动子元素后面加一个空div标签 设置清除浮动：
            .epty{
            clear: both;
             } */
            /* 4.给都元素设置伪元素 空的div加强版 */
            /* 5. 给父元素设置after伪类清除*/