清除浮动的五种方法

为什么要清除浮动?因为往往浮动后的子元素因为脱离了标准流,不能自动撑起父元素的高度,所以会对后续布局产生影响,对此清除浮动不如理解为清除浮动产生的影响更为合理。

例如:我们设置了两个盒子如图所示,粉色为父盒子,只有宽度没有高度,蓝色盒子有宽有高,粉色盒子的高由蓝盒子的高度撑开。

但是给蓝色的子盒子设置了左浮动后,脱离了标准流,无法再撑开粉盒子,可以看到粉盒子高度变成了0;


 

清除浮动有五种方法:

  1. 直接设置父元素的高度
  2. 额外标签法
  3. 单伪元素法
  4. 双伪元素法
  5. overflow-hidden

一:直接设置父元素的高度

因为子元素设置了浮动产生的影响就是父元素的高度无法被子元素撑开,所以直接给父元素设置高度是一个非常简便的做法。但是这种方法也有缺点,就是父元素不再是被子元素撑开的,高度有了限制,如果子元素内容较多,则会溢出父元素

 <style>
        .father{
            width: 600px;
            height: 500px;  //直接设置父元素的高度
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
    </div>
</body>

二:额外标签法

额外标签法即在父元素内容末尾添加一个块级元素,然后给该块级元素设置 clear:both;  缺点为会使代码内容添加很多不必要地标签,看起来较为混乱

 <style>
        .father{
            width: 600px;
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }

        .clear{  //给添加的块级元素添加属性
            clear: both;
        }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
        <div class="clear"></div>  //在父元素内容末尾添加一个块级元素,多为div
    </div>
</body>

三:单伪元素法

该方法与添加额外标签相似,只不过是在父元素内容最后天添加了一个伪元素,给其 display 设置为块级元素,并设置必需的 content 属性 ,最后设置 clear:both;   此方法优点为不会让代码内容乱糟糟,不会出现多余的标签,使用较多 。

 <style>
        .father{
            width: 600px;
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }

       .father::after{  //给父元素内容末尾添加了伪元素
           content: '';
           display: block;
           clear: both;
       }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
    </div>
</body>

为了避免一些较小众的浏览器也可以兼容此方法,往往会补充一些代码:作用为让网页看不到伪元素

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

四:双伪元素法:

此方法多用于清除盒子塌陷问题,另一个文章讲到过,也可以用于清除浮动,但是使用单伪元素更多

 <style>
        .father{
            width: 600px;
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }

       .father::before,  //双伪元素
       .father::after{
           content: '';
           display: table;
       }
       .father::after{
           clear:both;
       }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
    </div>
</body>

五:overflow-hidden

直接给父元素设置 overflow-hidden 即可,十分方便;

 <style>
        .father{
            overflow: hidden;  //直接给父元素设置 overflow:hidden 即可
            width: 600px;
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
    </div>
</body>

  • 11
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡卡西最近怎么样

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值