CSS清除浮动的本质以及清除浮动的方法

鳄鱼君

发表文章数:642

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 经验教程 » CSS清除浮动的本质以及清除浮动的方法

清除浮动的本质

清除浮动元素脱离标准流造成的影响
策略:
闭合浮动,只让浮动在父盒子内部受影响,不影响父盒子外面的其它盒子
浮动演示:

<style>
    .box-father {
        width: 1000px;
        border: 1px solid black;
    }

    .box-child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

    .footer {
        height: 30px;
        background-color: brown;
    }
</style>

<div class="box-father">
    <div class="box-child">盒子</div>
    <div class="box-child">盒子</div>
</div>
<div class="footer"></div>

额外标签法

在浮动元素尾部添加一个空的标签,这个标签只能是块级元素,不能是行内元素:

<div class="box-father">
    <div class="box-child">盒子</div>
    <div class="box-child">盒子</div>
    <div style="clear: both"></div>
</div>
<div class="footer"></div>

overflow属性

给父元素添加overflow属性,将其属性设置为hidden、auto或scroll都可以,缺点是无法显示溢出的部分:

.box-father {
            width: 1000px;
            border: 1px solid black;
            overflow: hidden;
        }

after伪元素

:after是额外标签的升级版,给父元素添加即可:

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

        /*IE6、7专有*/
        .box-father {
            *zoom: 1;
        }

例如:

<style>
    .box-father:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    /*IE6、7专有*/
    .box-father {
        *zoom: 1;
    }

    .box-father {
        width: 1000px;
        border: 1px solid black;
    }

    .box-child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

    .footer {
        height: 30px;
        background-color: brown;
    }
</style>

<div class="box-father">
    <div class="box-child">盒子</div>
    <div class="box-child">盒子</div>
</div>
<div class="footer"></div>

双伪元素

 .box-father:before,
        .box-father:after {
            content: "";
            display: table;
        }

        .box-father:after {
            clear: both;
        }

        .box-father {
            *zoom: 1;
        }

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS清除浮动的本质以及清除浮动的方法》 发布于2020-08-08

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

2 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册