DIV+CSS清除浮动方法

一、为什么要清除浮动?

    1》父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(正常情况下,父元素的高是由未浮动的子元素撑起来)

    2》因为部分子元素的而浮动,脱离文本流而造成其他元素的布局错乱。

二、常见的几种清除浮动方法

    1》给没有浮动的子元素的CSS添加 clear: both;或新增加一个空的子元素,并且给其的CSS添加 clear: both;这样可以利用清除左右浮动的子元素重新撑起父元素的高,从而达到清除浮动的效果。(关键字:未浮动子元素添加clear:both;)

    2》子元素全部浮动时,给父元素的CSS添加 overflow: hidden;*(当父元素用了定位时,这种方法就失去效果了,所以不推荐使用!!!)

   3》单位元素标签法:在样式表中写下述代码,给其父元素添加class 为 clearfix 的类(如果是在使用bootstrapt,则可以直接添加clearfix不用写下述代码)

         .clearfix:after{
                       display: block;
                       content: '';
                       height: 0;
                       visibility: hidden;
                       overflow: hidden;
                       clear: both;
                   }
        .clearfix{
                   *zoom:1;
                    }

   4》双伪元素标签法 在样式表中写下述代码,给其父元素添加class 为 clearfix 的类 !!推荐

              .clearfix:after,.clearfix:before{

                                          content:'''';

                                          display:table;

                                             }

              .clearfix:after{

                            clear:both;

                           }

             .clearfix{
                   *zoom:1;
                     }

   

   三、总结

     还有许多种清除浮动的方法,但是不推荐使用,在正常情况下,使用第三种或第四种方法就可以了。

   

原文地址:https://www.cnblogs.com/wyan20/p/5494133.html