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>
  • 相关阅读:
    Alignment
    Matrix 二维树状数组的第二类应用
    网络请求中的URL中传bool型数据
    把推送证书给服务器
    完全取代VC上原有的view
    图层CALayer的使用
    数组使用的注意事项
    使用CocoaPods
    声明遵循协议
    神奇的navigationBar.translucent
  • 原文地址:https://www.cnblogs.com/asenper/p/11649767.html
Copyright © 2011-2022 走看看