zoukankan      html  css  js  c++  java
  • 【css】--清除浮动的几种方法

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css" media="screen">
        .ft {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
    
        /*1、overflow:hidden*/
        .box {
            overflow: hidden;
        }
    
        /*2、 添加空元素 设置clear:both*/
        .fill {
            clear: both;
        }
    
        /*3.使用after伪元素清除浮动*/
        .box2:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .box2 {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
        }
    
        /*4、父元素设置高度*/
        .box3 {
            height: 100px;
        }
    
        /*5、父元素设置display:inline-block;*/
        .box4 {
            display: inline-block;
        }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div id="box1" class="ft"></div>
        </div>
        <div class="gr">overflow:hidden</div>
        <div class="box1">
            <div id="box2" class="ft"></div>
            <div class="fill"></div>
        </div>
        <div class="gr">添加空元素 设置clear:both</div>
        <div class="box2">
            <div id="box3" class="ft"></div>
        </div>
        <div class="gr">使用after伪元素清除浮动</div>
        <div class="box3">
            <div id="box4" class="ft"></div>
        </div>
        <div class="gr4">父元素设置高度</div>
        <div class="box4">
            <div id="box5" class="ft"></div>
        </div>
        <div class="gr">父元素设置display:inline-block;</div>
    </body>
    
    </html>
  • 相关阅读:
    图论算法 有图有代码 万字总结 向前辈致敬
    关闭和打开键盘的通知
    (copy)赋值构造函数的4种调用时机or方法
    构造函数的分类
    Uva
    Uva
    The 2018 ACM-ICPC Asia Qingdao Regional Contest F
    The 2018 ACM-ICPC Asia Qingdao Regional Contest E Plants vs. Zombies(ZOJ 4062)
    K Color Graph
    Cow and Fields
  • 原文地址:https://www.cnblogs.com/asenper/p/11649767.html
Copyright © 2011-2022 走看看