当前位置 : 主页 > 网页制作 > css >

【css】--清除浮动的几种方法

来源:互联网 收集:自由互联 发布时间:2021-06-13
! 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 : h
<!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>
网友评论