如何清除浮动带来的影响

最新推荐文章于 2024-07-19 08:58:30 发布

lskaixin

最新推荐文章于 2024-07-19 08:58:30 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/ls08250907/article/details/119149258

版权

文章目录

前言
一、为什么要清除浮动
二、清楚浮动的方法
- 1.额外标签发clear清除
- 2.父级添加overflow属性
- 3.父级添加after元素
- 4.父级添加双伪元素
总结

前言

浮动给我们带来许多便利的同时也带来了一些影响，比如，你给一个盒子添加浮动之后，这个盒子就会脱离标准流，也就是不占有位置，下面的盒子就会移动上来占用添加浮动盒子的位置，这就破坏了我们的网页布局，为了避免这种情况发生，我们就需要清除浮动。我们清除浮动的本质就是清除浮动元素造成的影响，下面就让我们来学习清除浮动。

一、为什么要清除浮动

我们为什么要清除浮动，最笼统的说发就是浮动影响了我们的网页布局，详细点就是因为浮动父级没有高度了、子盒子浮动了、影响了下面的布局。

例1.1 父盒子没有高度

例1.2 影响下面布局

二、清楚浮动的方法

1.额外标签发clear清除

clear有三个属性：

1.right清除右侧浮动的影响

2.left清除左侧浮动的影响

3.both同时清除左右两侧浮动的影响

在浮动元素末尾添加一个空的标签，例如<div class=“.box3”></div> .box3 {clear:both;}

代码如下（示例）：

 .box {
            width: 100%;
            border: 2px solid black;
        }

  .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

  .box2 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

  .box3 {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box3"></div>
    </div>
    <div class="box2"></div>

2.父级添加overflow属性

给浮动盒子的父元素添加overflow：hidden 属性

代码如下（示例）：

    .box {
            overflow: hidden;
            width: 100%;
            border: 2px solid black;
        }

        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</body>

3.父级添加after元素.

给浮动盒子父级元素添加after元素

代码如下（示例）：

  .box {
            overflow: hidden;
            width: 100%;
            border: 2px solid black;
            *zoom: 1
        }

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

        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>

4.父级添加双伪元素

给浮动盒子父级元素添加after和before元素

代码如下（示例）：

 .box {
            overflow: hidden;
            width: 100%;
            border: 2px solid black;
            *zoom: 1
        }

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

        .box::after {
            clear: both;
        }

        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>