• 浮动的影响与清除浮动


    影响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:
    内部标签法和外部标签法

  • 相关阅读:
    linux服务器git pull/push时提示输入账号密码之免除设置
    如何查看Linux发行版本
    pm2日志切割
    CentOS下配置redis允许远程连接
    Node.js对SQLite的async/await封装
    Linux 系统命令行下,对 SQLite3 数据库使用的一般操作
    CentOS 7下使用n工具更新Node.js
    英语原理,索引
    词根词缀,非核心prefix/suffix/root
    哲学家核心价值观
  • 原文地址:https://www.cnblogs.com/wulinzi/p/8276864.html
Copyright © 2020-2023  润新知