zoukankan      html  css  js  c++  java
  • 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;
                         }

       

       三、总结

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

       

  • 相关阅读:
    Python 存储引擎 数据类型 主键
    Python 数据库
    Python 线程池进程池 异步回调 协程 IO模型
    Python GIL锁 死锁 递归锁 event事件 信号量
    Python 进程间通信 线程
    Python 计算机发展史 多道技术 进程 守护进程 孤儿和僵尸进程 互斥锁
    Python 异常及处理 文件上传事例 UDP socketserver模块
    Python socket 粘包问题 报头
    Django基础,Day7
    Django基础,Day6
  • 原文地址:https://www.cnblogs.com/wyan20/p/5494133.html
Copyright © 2011-2022 走看看