zoukankan      html  css  js  c++  java
  • 清除浮动的方法

    为什么要清除浮动:在父盒子内部的元素具备浮动属性时,内部元素脱离文档流,内部元素无法再撑开父盒子,导致父盒子高度塌陷。

    1.添加额外空标签:在浮动的子元素后面添加一个块级标签,并且设置其clear为both,这个方法的原理是:

    设置这个额外的空盒子左右不允许浮动元素,所以他会跑到浮动元素的下面,当然在浮动元素全部为float:left时该盒子可以设置为clear:left,浮动元素全部为float:right时该盒子可以设置为clear:right.为了保险和方便起见还是clear:both比较好,

    注意不要设置其高度,否则他会撑开父盒子导致父盒子高度变大。

    2.使用after伪元素,对父级元素添加类名,并设置其after伪元素

    .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            .clearfix{
                *zoom:1;  /*兼容ie6.ie7*/
            }

    原理和额外标签类似。

    3.双伪元素法,对父级元素添加类名,并设置其after伪元素

     .clearfix:before,.clearfix:after{
                content: '';
                display:table;
                clear: both;
            }
            .clearfix{
                *zoom:1;
            }

    原理和额外标签类似。

    4.overflow方法:给父级元素添加overflow:hidden、auto或者scroll

    这种方法可能会出现滚动条

    5.给父级元素设置高度:简单暴力但是实用性不强,高度固定适用范围不大

  • 相关阅读:
    Postfix邮件服务
    Python
    LVS
    MFS
    Apache
    Zookeeper集群 + Kafka集群 + KafkaOffsetMonitor 监控
    shell 检测安装包
    shell ssh 批量执行
    shell 判断脚本参数
    bzoj 1500 修改区间 splay
  • 原文地址:https://www.cnblogs.com/yucheng6/p/9708786.html
Copyright © 2011-2022 走看看