解决网页高度塌陷问题---浮动塌陷

浮动塌陷

   第一种方法：

         直接 给父元素的css样式中添加声明    overflow:hidden;

   第二种方法：

          在已经浮动元素的下方添加一个空的div，并给这个空的div添加声明css样式

            .元素的类名{

             clear:both;

             height:0;

             overflow:hidden;

            }

     第三种方法：

 

        万能清除浮动法（建议使用）,先找到是哪个元素的浮动导致了高度的塌陷，然后对这个元素添加以下属性。

     .元素的类名 :after{

                content:”.”;

                display:block;

                clear:both;

                height:0;

                overflow:hidden;

                visibility:hidden;

               }

*visibility:hidden和display:none的区别：

Visibility：hidden 属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域。

display：none  属性会使这个对象彻底消失。