• 清除浮动


    经常会说没有清除浮动的话就会导致高度坍塌,啥是高度坍塌呢?
    1.什么是高度坍塌?
    简单来说就是包含有浮动元素的上一级元素(即父级元素)高度变为0了。下图有浮动元素的父级元素border设置为绿色,但是高度变为了0.

     
    高度坍塌

    为包含浮动元素的父级元素:

     
    未设置浮动.png


    代码:
    HTML:
    <div class="par">
    <div class="sub">第一个</div>

    <div class="sub">第二个</div>
    <div class="sub">第三个</div>
    </div>
    <div class="only"></div>

    css:
    .par{
    border: 1px solid #0bb20c;

    }
    .sub{
    20%;
    height: 50%;
    border: 1px solid red;
    float: left;/设置浮动/
    }
    .only{
    30%;
    height: 60px;
    background: #000;
    }

    二.解决高度坍塌
    1.父级div定义height,手动给父级div定义height,就解决了父级div无法自动获取到高度的问题。但是!只适合高度固定的布局,要给出精确的高度。
    2.在父元素结束之前,添加一个标签<div style="clear: both;"></div>。但是这样就使得css添加了没有意义的空标签,不利解读
    3.给父级元素设置overflow::auto 或者overflow:hidden。但是auto如果超出范围就会自动生成一个滚动条,hidden会导致超出部分直接隐藏。
    4.使用CSS的after伪元素

     
    设置父级元素的after,以及zoom

    tip:zoom是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用。 不过值得注意的一点就是火狐浏览器不支持zoom属性,但是在webkit内核浏览器中zoom这个属性也是可以被支持的。

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>解决高度坍塌</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="par">
    <div class="sub">第一个</div>
    <div class="sub">第二个</div>
    <div class="sub">第三个</div>
    
    
    </div>
    <div class="only"></div>
    </body>
    </html>
    
    css:
    .par{
    border: 1px solid #0bb20c;
    /*第二种方法,给父级元素设置overflow:auto 或者overflow:hidden*/
    /*overflow: hidden;*/
    }
    .sub{
     20%;
    height: 50%;
    border: 1px solid red;
    float: left;
    }
    .only{
     30%;
    height: 60px;
    background: #000;
    }
    .par:after{
    content: '.'; /*生成内容作为最后的一个元素,至于content里面是什么内容没有影响*/
    display: block;/*使得生成的元素以块级元素显示,占满剩余空间*/
    height: 0; /* 避免生成的内容破坏原有的空间的高度*/
    visibility: hidden;/*使得生成的内容不可见*/
    clear: both; /*闭合浮动*/
    }
    .par{
    zoom: 1;
    }
  • 相关阅读:
    HDU 1863 畅通project (最小生成树是否存在)
    经常使用MD5算法代码
    HDU 5045(Contest-费用流)[template:费用流]
    【c语言】统计一个数二进制中的1的个数
    git
    如何在阿里云服务器里配置iis 搭建web服务
    war包放入tomcat
    互联网推送服务原理:长连接+心跳机制(MQTT协议)
    保持Service不被Kill掉的方法--双Service守护 && Android实现双进程守护 3
    保持Service不被Kill掉的方法--双Service守护 && Android实现双进程守护 2
  • 原文地址:https://www.cnblogs.com/echo-hui/p/9217211.html
Copyright © 2020-2023  润新知