浮动

网页布局准则：多个块元素纵向排列找标准流，

多个块元素横向排列找浮动

float：{none 元素不浮动（默认值）} {float：left（元素向左浮动）} {float：right（元素向右浮动）}

浮动特性{ 浮动元素会脱离标准流

浮动的元素会一行内显示并且元素顶部对齐

浮动的元素会具有块元素的特性 }

/* overflow：hidden可以解决浮动造成的盒子塌陷问题 / / overflow: hidden; / / height: 150px; */

       /* 标准流布局 */
    /* float:left 脱离了标准流布局 */
    /* 给父盒子造成了 盒子塌陷 */
    /* 使用 display: inline-block; 会产生一条缝隙*/
    /* 目前解决盒子塌陷的方法 */
    /* 第一种给父盒子添加属性overflow:hidden,但是如果是下拉列表的情况，超出的会隐藏 */
    /* 第二种是给父盒子固定的高度，但是子盒子变多会溢出 */
    /* 第三种方式是个父盒子里面添加一个div，设置clear：both清除两边的浮动即可
    但是会多出一个div元素，显得很多余 */
    /* 第四种清除浮动的方法 伪类 */
    .box:after{ content: '';
     display: block;
     clear:both;  }