清除浮动常用方法

最新推荐文章于 2024-07-25 11:52:08 发布

znhyXYG

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量77

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/znhyxyg/article/details/126223777

版权

单伪元素清除、双伪元素清除浮动

 <style>
        .father{
            border: 1px solid black;
            *zoom: 1;
        }
        /* .clearfix:after,.clearfix:before{  //双伪元素清除
               content: "";
               display: block;
               clear: both;
           } */
           .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法  单伪元素清除*/
                content: "";
                display: block;
                height: 0;
                clear:both;
                visibility: hidden;
            }
            .clearfix {
                zoom: 1;
            }
           .big ,.small{
            width: 200px;
            height: 200px;
            float: left;
           }
           .big{
            background-color: red;
           }
           .small{
            background-color: blue;
           }
           .footer {
               width: 200px;
               height: 200px;
               background-color: green;
           }
    </style>

    <body>
        <div class="father clearfix">
            <div class="big">big</div>
            <div class="small">small</div>
            <!--<div class="clear">额外标签法</div>-->
        </div>
        <div class="footer"></div>
    </body>