css笔记:清除子元素对父元素的浮动效果的三种方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/YaoDeBiAn/article/details/78002147

对于浮动元素,我们知道如果父元素不设置height,而子元素全部设置为浮动,父元素不会被撑开(也就是父元素为一条直线,height为0),我们看到的就是一条线在所有子元素上面。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clear_float</title>
    <style>
        #father{
            border:1px solid #000;
            background:#ccc;
        }
        .child{
            width:100px;
            height:100px;
            background:red;
            float:left;
            margin-top:10px;
            margin-left:10px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
    </div>
</body>
</html>

结果截图如下:
这里写图片描述

这是由于浮动元素脱离标准流而存在,对于标准流与浮动元素就是实物与虚物之间的关系,如何清除浮动子元素对父元素的影响,有三种方法。
一.使用空标记清除浮动
以上面的例子为例,我们在浮动元素之后添加一个空标记(没有内容的标签),并对该标记设置“clear:both”,即可清除上例中子元素对父元素的影响。
例如:
上述id为father的div标签添加一个

    <div id="father">
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
        <div class="null"></div>
    </div>

然后style标签中添加一个“null”类的样式:

    <style>
        #father{
            border:1px solid #000;
            background:#ccc;
        }
        .child{
            width:100px;
            height:100px;
            background:red;
            float:left;
            margin-top:10px;
            margin-left:10px;
        }
        .null{
            clear:both;
        }
    </style>

结果截图如下:
这里写图片描述
注意:上述方法虽然可以清除浮动效果,但是却增加了毫无意义的元素节点。
二.使用overflow属性清除浮动
对父元素应用“overflow:hidden”也可以消除子元素对父元素的影响。
例如针对上述例子:

#father{
            border:1px solid #000;
            background:#ccc;
            overflow:hidden;
        }

同样能够实现方法一中的效果。
三.使用after伪对象清除浮动
我们可以通过在上述的father后面添加一个内容来消除上述影响。
注:只需设置属性’content’值为空即可。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clear_float</title>
    <style>
        #father{
            border:1px solid #000;
            background:#ccc;
            overflow:hidden;
        }
        #father:after{
            content:'';
        }
        .child{
            width:100px;
            height:100px;
            background:red;
            float:left;
            margin-top:10px;
            margin-left:10px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
    </div>
</body>
</html>

效果如上述其他方法,要注意的是,ie678其默认的内外边距可能不同,故显示的位置可能不同。

展开阅读全文

没有更多推荐了,返回首页