2.清除浮动

最新推荐文章于 2025-05-27 11:14:47 发布

jojo999888

最新推荐文章于 2025-05-27 11:14:47 发布

阅读量322

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/gc_20160403/article/details/76087655

css 专栏收录该内容

9 篇文章

订阅专栏

概念：

当父级元素没有定义高度，并产生浮动时，下面的元素位置会产生影响，会变动到上面，所以要消除这种不利影响。

方法：

额外添加标签法：在最后一个浮动的元素后添加一个标签。

<head>
    <style type="text/css">
        .content{
            width:300px;
            height:100px;
            float:left;
            }
        .sidebar{
            width:300px;
            height:200px;
            float:right;
            }
    </style>
</head>
<body>
    <div class="content"></div>
    <div class="sidebar"></div>
    <div style="clear:both"></div>
</body>

2.在父级元素使用overflow:hidden
当内容超出盒子的时候不能使用这个方法

<head>
    <style type="text/css">
        .main{
            width:300px;
            margin:10px 0;
            overflow:hidden
            }
        .content{
            width:300px;
            height:100px;
            float:left;
            }
        .sidebar{
            width:300px;
            height:200px;
            float:right;
            }
    </style>
</head>
<body>
    <div class="main">
        <div class="content"></div>
        <div class="sidebar"></div>
    </div>
</body>

3.伪元素清除浮动
意思就是在浮动元素的父元素后面加一个伪元素after

<head>
    <style type="text/css">
        .main{
            width:300px;
            margin:10px 0;
            }
        .content{
            width:300px;
            height:100px;
            float:left;
            }
        .sidebar{
            width:300px;
            height:200px;
            float:right;
            }
        .clearfix after{
            content:".";
            display:block;
            height:0;
            line-height:0;
            visibility:hidden;
            clear:both;
            }
        *兼容ie浏览器*
        .clearfix{
            zoom:1;
            }
    </style>
</head>
<body>
    <div class="main clearfix">
        <div class="content"></div>
        <div class="sidebar"></div>
    </div>
</body>