css中清除元素浮动带来的影响的方法

weixin_51938803

于 2024-03-10 12:03:53 发布

阅读量402

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_51938803/article/details/136597045

版权

一、为什么要清除浮动？

首先浮动的话会使元素的容器（父元素）高度塌陷，影响布局，所以要让容器不被浮动影响到，我们可以给父元素清除浮动带来的影响。

二、清除浮动影响的方法。

1.在浮动元素后面加一个空元素，设置其样式为clear:both。

2.给容器添加一个overflow属性，给浮动元素的容器添加overflow:hidden或overflow:auto;可以清除浮动。

3.给浮动元素容器使用css的:after伪元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .float-left {
        float: left;
        width: 50px;
        height: 50px;
        background-color: rebeccapurple;
    }
    .float-right {
        float: right;
        width: 50px;
        height: 50px;
        background-color: rgb(153, 117, 51);
    }
    .container {
        border: 1px solid #000;
    }
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
</style>
<body>
    <div class="container clearfix">
        <div class="float-left">左侧内容</div>
        <div class="float-rigth">右侧内容</div>
    </div>
</body>
</html>

4.给浮动元素容器使用浮动

给浮动元素的容器加上浮动属性即可清除内部浮动，但是这样会使其内部整体浮动，影响在页面的布局，不推荐使用。

weixin_51938803

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css中清除元素浮动带来的影响的方法

首先浮动的话会使元素的容器（父元素）高度塌陷，影响布局，所以要让容器不被浮动影响到，我们可以给父元素清除浮动带来的影响。给浮动元素的容器加上浮动属性即可清除内部浮动，但是这样会使其内部整体浮动，影响在页面的布局，不推荐使用。
复制链接

扫一扫