问题的出现

我们前面所讲的装浮动的标准流大盒子,都是有高度的。在他的浮动子元素里,个数确不是一定以及子元素的高宽,在我们的开发中父盒子的高度是不确定的!!!,如果父盒子的大小自动浮动子元素的匹配就好了,现在浮现在我脑海里一句话就是,子盒子不是会撑开父盒子的大小吗,父盒子高度不给就好了?,但是事实不是这样的,

        <style>
                .box {
                        width: 600px;
                        background-color: bisque;
                        margin: 0 auto;
                        border: 1px solid black;
                }

                .one {
                        float: left;
                        width: 100px;
                        height: 100px;
                        border: 1px solid black;
                        background-color: palegreen;
                }

                .two {
                        float: left;
                        width: 100px;
                        height: 100px;
                        border: 1px solid black;
                        background-color: red;
                }
        </style>
        <div class="box">
                <div class="one"></div>
                <div class="two"></div>
        </div>

效果:

image-20201218153824329

原因就是浮动元素不占位置,这样的话,下面的标准流盒子就会补上来,导致布局错乱。

清除浮动 clear

  1. 如果父盒子有高度就无需清除

  2. 清除浮动后,浮动的盒子就会占用原来的位置了,父盒子就会让自己的小盒子撑起来,这样我们就不用担心前面的问题了。

  3. 这个clear不是清除自己的浮动 而是清除旁边盒子的浮动不占位置的影响

clear : 值

描述
left清除左侧有浮动的盒子的影响。
right清除右侧有浮动的盒子的影响。
both两侧都清除

我们经常使用 both值.

清除浮动的方法

  1. 额外标签法
  2. 给父元素加入 overflow: hidden;
  3. :after 伪元素法(给父元素)
  4. :after :before双伪元素清除

改装如下代码

        <style>
                .box {
                        width: 600px;
                        background-color: bisque;
                        margin: 0 auto;
                        border: 1px solid black;
                }

                .box1 {
                        width: 600px;
                        height: 300px;
                        background-color: pink;
                        margin: 0 auto;
                        border: 1px solid black;
                }

                .one {
                        float: left;
                        width: 100px;
                        height: 100px;
                        border: 1px solid black;
                        background-color: palegreen;
                }

                .two {
                        float: left;
                        width: 100px;
                        height: 100px;
                        border: 1px solid black;
                        background-color: red;
                }
        </style>
</head>

<body>
        <div class="box">
                <div class="one"></div>
                <div class="two"></div>
        </div>
        <div class="box1">我是后面的标准流盒子</div>
</body>

额外标签法

就是在我们浮动的盒子后面加一个具有clear属性的盒子,类似关门打狗一样

        <div class="box">
                <div class="one"></div>
                <div class="two"></div>
                <!-- 加入额外的标签 -->
                <div style="clear:both"></div>
        </div>
        <div class="box1">我是后面的标准流盒子</div>

image-20201218160620402

其实这个不算是很方便,每次清除浮动的时候还要加入一个行的毫无意义的标签。而且必须要求是块级元素不能是行内元素。

父元素加入 overflow: hidden;

overflow: hidden;

这个就十分方便了,但是也有缺点,就是无法显示溢出的部分

:after 伪元素

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* 兼容IE6、7的版本  */
            *zoom: 1;
        }

这样的话,我们就可以给父元素加入一个class="clearfix"就好了,这个方法和前面的额外标签法本质上一样的,这个after帮我们在后面加入了个盒子。

优点就是没有加入新的盒子!!

:after :before双伪元素清除

只用after就挡住了后门,当然我们也可以挡住前门

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

用法和前面的一致

结语

79A59EF56224B22753145CEA8E88BAA2-dfc4efa7ed3d4a6480b9233445c2e872

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2020/12/18/css浮动2清除浮动的方法总结clear
最后更新于:  279  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟