清除浮动的解决方法

最新推荐文章于 2024-06-29 11:58:27 发布

Eric_freestyle

最新推荐文章于 2024-06-29 11:58:27 发布

阅读量168

点赞数

分类专栏： html css 文章标签： html

本文链接：https://blog.csdn.net/Eric_freestyle/article/details/109531458

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

在排版布局时，我们经常会用到浮动，利用浮动大大优化了页面的精美度，浮动在带给我们便利的同时也存在一些问题，例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
        }

        .bbox {
            width: 400px;
            height: 400px;
            background-color: #ff3040;
        }

        .sbox {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .footer {
            width: 100%;
            height: 80px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="bbox"></div>
        <div class="sbox"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

我们会看到在这里插入图片描述
当我们给子盒子设置浮动以后

        .bbox {
        	float:left
            width: 400px;
            height: 400px;
            background-color: #ff3040;
        }

        .sbox {
        	float:left
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

我们会看到
在这里插入图片描述
这是因为我们在给子盒子设置浮动以后，子盒子脱离了标准流，不占据原有的位置，这时下面的盒子就浮了上来形成上面的一个效果，很显然我们不希望在排版布局的时候出现这种问题，这时就要用到清除浮动了，清除浮动通俗点来说是清除浮动带来的影响，我们常用的有四种方法：

1.造一个空标签

在父盒子下面设置一个空的div,里面添加clear：both属性，代码如下：

 <div class="box">
        <div class="bbox"></div>
        <div class="sbox"></div>
        <div style="clear: both"></div>
    </div>
    <div class="footer"></div>

效果图：在这里插入图片描述

2.给父盒子设置一个高度

代码如下：

 		.box {
            width: 600px;
            height: 400px;
        }

        .bbox {
        	float: left;
            width: 400px;
            height: 400px;
            background-color: #ff3040;
        }

        .sbox {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .footer {
            width: 100%;
            height: 80px;
            background-color: blueviolet;
        }

效果图：在这里插入图片描述

3.给父盒子设置overflow:hidden/overflow:auto属性

代码如下：

		.box {
            width: 600px;
            /* height: 400px; */
            /* overflow: hidden; */
            overflow: auto;
        }

        .bbox {
        	float: left;
            width: 400px;
            height: 400px;
            background-color: #ff3040;
        }

        .sbox {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .footer {
            width: 100%;
            height: 80px;
            background-color: blueviolet;
        }

效果图：在这里插入图片描述

4.使用after双伪元素

代码如下：

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

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 600px;
            /* height: 400px; */
            /* overflow: hidden; */
            /* overflow: auto; */
        }

        .bbox {
            float: left;
            width: 400px;
            height: 400px;
            background-color: #ff3040;
        }

        .sbox {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .footer {
            width: 100%;
            height: 80px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box clearfix">