关于浮动导致的高度塌陷问题的解决方法

 浮动float

特性：

               1. 浮动元素会脱离标准流  不占据界面位置 形成了层次 压盖底下的标准流元素

               2. 浮动脱离标准流 但是不脱离文本流(文本环绕浮动元素放置！！)

               3. 浮动元素遇见浮动元素立即停止

               4. 浮动从上往下影响

            由于第一个特性，导致了高度塌陷，会使添加在浮动下方的盒子被浮动的元素覆盖。

解决方法：

（1）给父盒子加高度（不好用）

                             原因好多界面不能给父盒子定高度，只能由内容撑开。

                 

（2）利用BFC规则

                          BFC 规则，如果父盒子是BFC盒子，那这个盒子的浮动子元素也参与高度计算

                  

（3）专门创造一个css属性，清除浮动的影响  （缺点：添加空标签，结构复杂，不清晰）

                           clear：left清除左浮动/right右浮动   /both两侧都清除

                            浮动气流是单向向下影响的！！！ 所以这个clear：both；要放到父盒子的最后                       一  个元素上。

                   

 (4)拿css代码创造标签插入到最后一个浮动子元素的下面就可以了！！

               css代码确实能创造元素---伪元素法

               .clearfix::after {               //单冒号兼容性更好，它支持更老的版本

                                                    //after是在最后创建，before可以在最前面创建

                   content:'';                  //内容必须为空

                   display:block;           //伪元素默认为行内 而浮动清除的类型必须是块类型！！

                   clear:both;

               }