盒子模型——浮动

浮动
    网页文档流--元素在网页中的排列规则 。float属性用于创建浮动框
    特性
        浮动的元素会脱离文档流。
        浮动的盒子不再保留原先的位置。如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
            浮动的元素是互相贴靠在一起的(不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
        浮动元素会具有行内块元素特性
            如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
            浮动的盒子中间是没有缝隙的，是紧挨着一起的。行内元素同理
    高度塌陷
        当父元素不设置高度的时候靠子元素撑大，也就是说子元素有多高，父元素就有多高，当子元素浮动后，父元素就会高度塌陷。父元素高度塌陷后，父元素下面的元素就会向上移动，这样会导致整个页面的布局混乱。
        解决方法
            方法一:
                给父元素设置固定的高度，固定高度后，父元素的高度就无法自适应子元素的高度了。
                弊端：但是不能让元素高度自适应了 。
                 height: 300px;
            方法二：
                给父元素设置overflow：hidden，解决高度塌陷并能实现高度自适应的方法（遵循BFC的显示原则）
                弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；
                overflow: hidden;
            方法三：
                在浮动元素的下方添加一个空元素，并且给他设置一下属性。
                弊端：会添加很多空标记，增加结构负担，产生代码冗余；
                 #kongbai {clear: both;height: 0%;overflow: hidden;}
            方法四：
                给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；
                弊端：会改变当前元素的元素类型；
                display: table;
            方法五：万能清除法
                通过after伪类元素添加一个空白的块元素，css加下列属性，并给要清除的div加上clear_fix的类名。
                没有什么副作用。