css中清除浮动方法介绍

作者:袖梨 2022-06-25

 

 代码如下 复制代码
  
   
   
       

           

               


                    floated box
               


           

           

Container 1


           


                (without
                easy clearing)
           


       

   


去网上查了一下,这就是著名的浮动问题。我们需要做的就是将浮动效果给清除。
咋个解决方法
网上有好多解决办法,但是普遍是在这三类中:
在浮动的div外层,增加含有clear:both样式定义的div元素
使用overflow:auto,但是这个传说中会引起一些很杯具的效果
使用after伪元素进行处理,同时对于IE使用hack
首先第二种,既然传说中会杯具,那么我肯定不用。而第一种,对于我这种有类似html洁癖的人也肯定不会使用,平白无故增加一个div标签,实在感觉有些划不来,还有些恶心。
所以我彩after伪元素来处理,具体处理后的代码如下:

 代码如下 复制代码

 

       
        简易浮动清除
       
   
   
       


           

               


                    floated box
               


           

           

Container 1


           


                (without
                easy clearing)
           


       

   


           

               


                    floated box
               


           

           

Container 1


           


                (without
                easy clearing)
           


       

       

   
       

           

               


                    floated box
               


           

           

Container 1


           


                (without
                easy clearing)
           


       

   

问题得以解决。网上还有人说在div标签后面加上一个“点”感觉不爽,而且还要使用visibility来隐藏。所以建议使用如下代码替代:

 代码如下 复制代码

.clearfix:after{content:"";display:block;height:0;clear:both;}

这样我们的问题就解决了。

相关文章

精彩推荐