【html、CSS-5】clearfix

一、CSS全局应用

父标签div下包含两个子标签div，当子标签dvi全部向左float，此时父标签设置的背景色是不显示的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
    </div>
</body>
</html>

父标签包含两个左漂标签，父标签背景色不显示

如果想显示父标签的背景色，可以在子标签中再加一个div，则代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
        .div_a3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
        <div class="div_a3">div_a3</div>
    </div>
</body>
</html>

通过在子标签中添加div显示父级的背景色

设想下假如一个项目中有很多这样的父子div，需要显示父级的背景色，那么没个父子块都需要单独设置样式是非常繁琐的事，那么通过什么方式解决呢？

首先：div:afer{content:"abcd"}这样的方式可以在标签的后面加上内容，实质上通过after加上的内容也作为一个内联标签存在的。

所以通过after的方式可以实现上面的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a:after{
            content: "abcd";
            display: block;
            clear: both;
        }
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
        .div_a3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
    </div>
</body>
</html>

通过after加内容

现在需要把加上的内容去掉，并且可以应用的其他父子模块：

visibility: hidden 可以隐藏模块，并且不占用位置，而display:none是隐藏并占据原来的位置

visibility用在after中还要加上height:0px 才能不占用位置，否则还占据abcd那一行的位置

定义通用模块只需要在style中自定义一个名字叫clearfix的class就可以，.clearfix{}，然后如果有相同的模块想用这种格式，只需要在标签class的属性值中添加clearfix就可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content: "abcd";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
        .div_a3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div_a clearfix">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
    </div>
</body>
</html>

通用格式

【html、CSS-5】clearfix

猜你喜欢