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.给父级元素设置高度:简单暴力但是实用性不强,高度固定适用范围不大

  • 相关阅读:
    [转][Linux/Ubuntu] vi/vim 使用方法讲解
    [转]在Windows中安装Memcached
    memcached可视化客户端工具
    [转]C#操作Memcached帮助类
    [转]Redis和Memcache区别,优缺点对比
    [转]【转】大型高性能ASP.NET系统架构设计
    [转]浅谈命令查询职责分离(CQRS)模式
    element-UI——el-table添加序号
    xss攻击(转)
    vuex原理
  • 原文地址:https://www.cnblogs.com/yucheng6/p/9708786.html
Copyright © 2011-2022 走看看