CSS浮动-5.3常用技巧清除浮动-clearfix方案h；- .clearfix:after {content: ““；clear: both；display: block；三；个；可；选护航}

最新推荐文章于 2024-01-17 10:30:27 发布

say hi.

最新推荐文章于 2024-01-17 10:30:27 发布

阅读量2.9k

点赞数 4

本文链接：https://blog.csdn.net/qq_44280574/article/details/108323859

版权

大厂开发当中经常使用的清除浮动的方案：
clearfix（clearfix是父元素属性class的一个值，可以自己随意取的）方案【原理：就是在这个父元素的最后创建一个伪元素after。通过这个伪元素的一系列相关属性，就达到了清除浮动的目的 .clearfix:after 】
使用伪元素after在父元素尾部添加一个元素
对这个添加的伪元素应用清除浮动的样式
必备三大样式：content:"; 、clear:both; 、display:block; **
可选三大样式：height、font-size、visibility（可见不可见） height: 0px;
font-size: 0px;
visibility: hidden;【可选样式，主要为了保证呀，我们在实际开发的过程中，浏览器的兼容性能更好一些。他们的目标只有一个，就是要保证after伪类不在页面上显示出来。因为我们这个伪类，就是用来清除浮动，我们并不希望其显示出来，影响我们页面的布局。即我们想让这个伪类去干活，但又不想让他露脸。】
【【插入扩展
display:none与visibility:hidden;的区别：
display设置为none ，不可见，整个这个元素不占用**任何的物理空间，压根像是不存在一样。
但是如果是visibility的话，设置成不可见的时候，同样也会占用物理空间，只是你看不见他，但是那个坑还在。
】】

例如：

.clearfix:after { content:";clear:both;display:block; }
.clearfix:after { content:";clear:both;dislpay:block;      visibility:hidden; height:0px; font-size:0px;}

练习例子1：伪元素after必备三大样式：content、clear、diaplay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
    <style>
        .box {
            border: 1px solid #000;
        }
        .left {
            width: 200px;
            height: 200px;
            background: yellow;
            float: left;
        }
        .right {
            width: 200px;
            height: 200px;
            background: green;
            float: right;
        }
        /* 使用伪元素
        可以达到清除浮动的效果  
        与上一节方法1-使用clear清除浮动-异曲同工*/
        .clearfix:after {
            /* 如果要使用伪元素，一定要设置content 
            意思是指，你伪元素的内容是什么，
            因为我们的目的是清除浮动，
            所以这里设置为""空 就好了*/
            content: "";
            clear: both;
            /* 为什么要设置成block？
            弄明白这里
            我们就需要深入理解一下浮动和清除浮动的底层原理 
            如果上一节方法1-使用clear清除浮动  
            我们不是用的div 而是用span
            那将不会达到清除浮动的效果！！
            即必须是块级元素(这样，他的宽高度能够自动和父元素一致)，
            内联块级inline-block也是不行的！必须是block块级！*/
            display: block;
        }
    </style>
</head>
<body>
    <!-- 可以达到清除浮动的效果 -->
    <div class="box clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

练习例子2：可选样式也加上，保驾护航
height: 0px;
font-size: 0px;
visibility: hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
    <style>
        .box {
            border: 1px solid #000;
        }
        .left {
            width: 200px;
            height: 200px;
            background: yellow;
            float: left;
        }
        .right {
            width: 200px;
            height: 200px;
            background: green;
            float: right;
        }
        /* 使用伪元素
        可以达到清除浮动的效果  
        与上一节方法1-使用clear清除浮动-异曲同工*/
        .clearfix:after {
            /* 如果要使用伪元素，一定要设置content 
            意思是指，你伪元素的内容是什么，
            因为我们的目的是清除浮动，
            所以这里设置为""空 就好了*/
            content: "";
            clear: both;
            /* 为什么要设置成block？
            弄明白这里
            我们就需要深入理解一下浮动和清除浮动的底层原理 
            如果上一节方法1-使用clear清除浮动  
            我们不是用的div 而是用span
            那将不会达到清除浮动的效果！！
            即必须是块级元素(这样，他的宽度能够自动和父元素一致)，
            内联块级inline-block也是不行的！必须是block块级！*/
            display: block;

            /* 有他们三个保驾护航，after伪类就不可能露脸 
            更纯粹的用于清除浮动，又不影响页面的布局*/
            height: 0px;
            font-size: 0px;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 可以达到清除浮动的效果 -->
    <div class="box clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>