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;
                         }

       

       三、总结

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

       

  • 相关阅读:
    【Leetcode】328.奇偶链表
    【Leetcode】127.单词接龙(BFS与DFS区别)
    从ReentrantLock加锁解锁角度分析AQS
    一文解决LeetCode岛屿问题
    IIS 解决首次加载慢的问题
    IEqualityComparer<TSource> 比较规则
    C# 闭包问题 (待完善)
    两个MD5值一样的 128 byte sequences
    Windows解决忘记用户密码
    部署在阿里云上的项目收到了阿里云发送的shiro漏洞
  • 原文地址:https://www.cnblogs.com/wyan20/p/5494133.html
Copyright © 2011-2022 走看看