zoukankan      html  css  js  c++  java
  • 浮动的影响与清除浮动

    影响1:
    div1 div2 div3,要实现dev1 div2 在第一排显示,div3另起一行?
    方法:给div1 div2加浮动,1和2会脱离正常流,因为div3属于正常流会上到第一排,并且被1和2覆盖
    就是为什么要清除浮动,消除浮动影响:
    方法1:
    加一个空div,.clearfix{clear:both} 在div3前加一个空div,加类clearfix,div3不会到第一排


    影响2(高度塌陷):
    父不设高度,div1 div2,父div我只是给了它的背景颜色是黄色,这种情况很容易理解嘛,因为它的子元素把它撑开了嘛,那现在我的需求变了,将1和2一排展示,加浮动,此时父不能被撑开高度。
    现在div1和div2都有了向左浮动,脱离了标准流,我们发现,原本外面包裹的div不见了,不理解的人这时候就很纳闷了,可能你在用的时候不会注意到,也有可能当时需求不一样,所以不能注意到这点,它是怎么回事呢,因为div1和div2都脱离了标准流,所以外面包裹的div没有支撑的东西, 也就是所谓的高度塌陷,那么,我们并不想让它呈现出这种效果,所以这个时候就要清楚浮动了
    方法2:
    overflow方法,在父元素上设置overflow这个属性,如果父元素的这个属性设置为auto或者是hidden,父元素就会扩展包含浮动,这个方法有着比较好的语义性,因为它不需要额外的元素,但是,要记住一点,overflow属性不是为了清除浮动而定义的,要小心不要覆盖住内容或者触发了不需要的滚动条。
    现在我就给外面的div添加overflow:hidden,或者是auto,

    方法3:
    就是利用伪类元素来清除有浮动的标签,也就定义一个公共的类clearfix,给这个类添加css属性,在里面进行清除浮动的操作,光说没用,直接看代码吧:
    .clearfix:after{
    content:"";
    display:table;
    height:0;
    visibility:both;
    clear:both;
    }
    .clearfix{
    *zoom:1; /* IE/7/6*/
    }
    比如上面的例子,我就给外面包着的div添加clearfix这个类,可以达到和上面同样的效果。这种方式这样理解,就是利用伪类元素,也就是在有浮动的标签前面添加一个块级元素,来达到效果。


    方法4:
    内部标签法和外部标签法

  • 相关阅读:
    zoj 3279 线段树 OR 树状数组
    fzu 1962 树状数组 OR 线段树
    hdu 5057 块状链表
    hdu3487 Play with Chain
    bzoj 1588营业额统计(HNOI 2002)
    poj2823 Sliding Window
    poj2828 Buy Tickets
    poj2395 Out of Hay
    poj3667 Hotel
    poj1703 Lost Cows
  • 原文地址:https://www.cnblogs.com/wulinzi/p/8276864.html
Copyright © 2011-2022 走看看