清除浮动的三种常用方法

最新推荐文章于 2024-04-22 21:55:14 发布

原创最新推荐文章于 2024-04-22 21:55:14 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浮动

兼容专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            width:800px;
            border: 1px solid;
            margin:10px auto;

            /*// 第一种在父级元素上添加overflow:hidden*/
            overflow: hidden;
        }
        .common {
            width: 190px;
            height: 100px;
            border: 1px solid palevioletred;
            float: left;
        }
        /*}*/

        /*第二种:在父级元素上添加伪类*/
        .container:after{display:block;clear:both;content:"";visibility:hidden;height:0}
        .container{zoom:1}  //IE特有属性

 </style>
</head>
<body>
<div class="container">
    <div class="common">1</div>
    <div class="common">2</div>
    <div class="common">3</div>
    <div class="common">4</div>
    <!--在父元素内的最后一个子元素上添加clear:both-->
    <div style="clear: both;"></div>
</div>
</body>
</html>

注意：单引号和双引号
:after(兼容IE8）
::after（不需兼容IE8）