清除浮动的四种方法（详解）

最新推荐文章于 2019-09-06 10:08:04 发布
最新推荐文章于 2019-09-06 10:08:04 发布
阅读量1k 收藏 1
点赞数
分类专栏： CSS新手学习 文章标签： css html 标签 清除浮动 web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ameir_yang/article/details/72810500
版权

以下全部操作是在 Webstorm中进行的，个人认为webstorm比dreamweaver好用。

 

操作例子

样图：


代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>清除浮动</title>
        <base target="_self">
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box1{
                background-color: pink;
            }
            .box1 p{
                width: 100px;
                background-color: yellow;
            }
            .box2{
                background-color: skyblue;
            }
            .box2 p{
                width: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
        <div class="box2">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
    </body>
</html>

全部左浮动后：

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>清除浮动</title>
        <base target="_self">
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box1{
                background-color: pink;
            }
            .box1 p{
                width: 100px;
                background-color: yellow;
                float: left;
            }
            .box2{
                background-color: skyblue;
            }
            .box2 p{
                width: 100px;
                background-color: blue;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
        <div class="box2">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
    </body>
</html>

---------------------------------------------------------------------------------------------------

清除浮动后的效果是：让黄色部分与蓝色部分分行。

 

因为没有设置 box1 和 box2的宽和高，所以box1 和 box2 的形状 随着 浮动状态的变化而变化。

---------------------------------------------------------------------------------------------------

方法一：clear:both; 这是最基本的方法

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>清除浮动</title>
        <base target="_self">
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box1{
                background-color: pink;
            }
            .box1 p{
                width: 100px;
                background-color: yellow;
                float: left;
            }
            .box2{
                background-color: skyblue;
                clear: both;
            }
            .box2 p{
                width: 100px;
                background-color: blue;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
        <div class="box2">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
    </body>
</html>

出现问题：不能直接用margin-top和margin-bottom设置两个兄弟盒子之间的距离。

解决方法：给这两个的盒子的父元素盒子添加一个边框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>清除浮动</title>
        <base target="_self">
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box1{
                background-color: pink;
            }
            .box1 p{
                width: 100px;
                background-color: yellow;
                float: left;
            }
            .box2{
                background-color: skyblue;
                clear: both;
            }
            .box2 p{
                width: 100px;
                background-color: blue;
                float: left;
            }
            body{
                border: 1px solid #000000;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
        <div class="box2">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
    </body>
</html>

这样就能设置margin-top和margin-bottom属性，但是如果当这两个属性的值设置的太小，box1与box2之间依然没有空隙分开。

设置 box2 的 margin-top: 10px;时：


设置 box2 的 margin-top: 20px;时


设置 box2 的 margin-top: 30px;时

 

当值为30的时候才会出现空隙。

Margin-bottom:;与margin-top 相同。



改变box1和box2两个盒子之间的距离：

先给 box1和box2的父元素加一个边框，然后再给box2添加margin-top属性或者给box1添加margin-bottom属性，添加的属性赋予适当的 数值 ，因为数值太小没有任何效果，box1和box2不会有空隙。

原因如图：

 

Margin-top的数值是大于所看到的距离的。所以margin-top数值在设置的时候要设置的大一些，大于所看到的分开距离。

 


方法二： 隔墙法

1.外墙法

方法： 在两个盒子（box1 , box2）之间添加一个额外的块级元素。

       给这个额外添加的块级元素设置clear:both;属性。

 

代码：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>清除浮动</title>
        <base target="_self">
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box1{
                background-color: pink;
            }
            .box1 p{
                width: 100px;
                background-color: yellow;
                float: left;
            }
            .box2{
                background-color: skyblue;
            }
            .box2 p{
                width: 100px;
                background-color: blue;
                float: left;
            }
            .qiang{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
        <div class="qiang"></div>
        <div class="box2">
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
        </div>
    </body>
</html>

（1）可以给box2盒子添加 margin-top属性，让box1与box2分开。

（2）不可以给box1盒子添加margin-bottom属性：

 解决方法给box1盒子的父元素（body）添加一个边框。

 给父元素添加完边框后的情况：

  给box2添加  Margin-top: 10px;   box1 与 box2分开10px。

  给 box1 添加 margin-bottom: 30px; box1 与 box2 分开 10px。

  其原因 与 直接添加 clear: both; 一样，解决方法也一样。

（3）使 box1 与 box2 分开有空隙的方法：

         1. 给box1 添加 margin-bottom属性，但是这种方法要给body设置边框，而且margin-bottom属性的值要设置的大一些。

         2. 给box2 添加 margin-top属性。

         3.给<div class=”qiang”></div>这个盒子设置高度。也就是给额外添加的块级元素添加高度这一属性，高度的值与所想要的box1，box2之间的距离相同。

方法代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            background-color: pink;
        }
        .box1 p{
            width: 100px;
            background-color: yellow;
            float: left;
        }
        .box2{
            background-color: skyblue;
        }
        .box2 p{
            width: 100px;
            background-color: blue;
            float: left;
        }
        .qiang{
            height: 10px;
            clear: both;
        }
 
    </style>
</head>
<body>
<div class="box1">
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
</div>
<div class="qiang"></div>
<div class="box2">
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
</div>
</body>
</html>

2.内墙法

方法：（1） 在第一个盒子（box1）中所有的子元素最后添加一个额外的块级元素。

         （2） 给这个额外添加的块级元素设置clear:both;属性。

 

代码：

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            background-color: pink;
        }
        .box1 p{
            width: 100px;
            background-color: yellow;
            float: left;
        }
        .box2{
            background-color: skyblue;
        }
        .box2 p{
            width: 100px;
            background-color: blue;
            float: left;
        }
        .qiang{
            clear: both;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <div class="qiang"></div>
</div>
<div class="box2">
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
</div>
</body>
</html>

（1）可以给box2盒子添加 margin-top属性，让box1与box2分开。

（2）可以给box1盒子添加margin-bottom属性，让box1与box2分开。


使 box1 与 box2 分开有空隙的方法：

         1. 给box1 添加 margin-bottom属性。

         2. 给box2 添加 margin-top属性。

 3 给<div class=”qiang”></div>这个盒子设置高度。也就是给额外添加的块级元素添加高度这一属性，高度的值与所想要的box1，box2之间的距离相同。


总结：

*比较这两种方法，说出外墙法和内墙法的不同之处？

（1）内墙法直接就可以用margin-bottom设置box1与box2之间的距离，但是外墙法要经过处理（给父元素添加边框），才能用margin-bottom设置距离。

（2）外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度。

方法： 在额外增加的块级元素中添加高度这个属性，用块级元素的高度来改变两个盒子之间的上下距离。

内墙法：


外墙法：

 


内墙法和外墙法在企业开发中都不推荐使用，很少进行使用。因为添加了很多额外的块级元素，影响了代码的可读性。在前端开发中推崇的是：结构和样式分离。

 

 

方法三： 伪元素法


在讲伪元素法之前先要了解伪元素选择器

伪元素选择器的作用：给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素。

效果图：

 

不用伪元素选择器给内容 添加 前后子元素:

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box1 p{
            display: block;
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是前面。</p>
        我是内容。
        <p>我是后面。</p>
    </div>
</body>
</html>

使用伪元素选择器进行添加内容的前后子元素：

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box1::before{
            content: "我是前面。";
            display: block;
            width: 50px;
            height: 50px;
            visibility: visible;
            background-color: pink;
        }
        .box1:after{
            content: "我是后面的。";
            display: block;
            width: 50px;
            height: 50px;
            visibility: visible;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">
        我是内容。
    </div>
</body>
</html>


隐藏内容前面或者内容后面的子元素的方法：

以隐藏内容后面的子元素为例子

方法：

height: 0px;

visibility: hidden;  将.box1::after{}中的height属性的值改为0，visibility属性的值改为hidden。

（1）height: 0px; 的意思是：将盒子或块级元素的高度变为零，隐藏显示后面子元素的区域。

（2）visibility: hidden; 的意思是：将盒子或块级元素中的文字部分隐藏起来。

 综上所述，显示区域和内容区域都被隐藏起来了，所以整个子元素也被隐藏起来了。


代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box1::before{
            content: "我是前面。";
            display: block;
            width: 50px;
            height: 50px;
            visibility: visible;
            background-color: pink;
        }
        .box1:after{
            content: "我是后面的。";
            display: block;
            width: 50px;
            height: 0px;
            visibility: hidden;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">
        我是内容。
    </div>
</body>
</html>

利用 伪元素选择器 清除浮动：

方法：在第一个盒子（box1）中内容的最后 添加一个 伪元素选择器。在伪元素选择器中添加 content: "";  height: 0px;  visibility: hidden;  display: block;  clear: both;这些属性。

 

content: ""   不写入任何的内容。

height: 0px;   显示区域没有高度。

visibility: hidden;  隐藏内容区域的内容部分。

display: block;  设置成块级元素。

clear: both; 清除所有浮动

 

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            background-color: pink;
*zoom: 1;
        }
        .box1 p{
            width: 100px;
            background-color: yellow;
            float: left;
        }
        .box2{
            background-color: skyblue;
        }
        .box2 p{
            width: 100px;
            background-color: blue;
            float: left;
        }
        .box1::after{
            content: "";
            height: 0px;
            visibility: hidden;
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
</div>
<div class="box2">
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
</div>
</body>
</html>

 注意：在box1中添加*zoom: 1;的原因是： 兼容IE6 ， 提高兼容性。

    （1）可以给box2盒子添加 margin-top属性，让box1与box2分开。

     （2）可以给box1盒子添加margin-bottom属性，让box1与box2分开。


使 box1 与 box2 分开有空隙的方法：

         1. 给box1 添加 margin-bottom属性。

         2. 给box2 添加 margin-top属性。

 3 给伪元素选择器设置高度，高度的值与所想要的box1，box2之间的距离相同。

 

注意： 伪元素法可以撑起第一个盒子（box1）的高度，与内墙法效果一样。

当给伪元素选择器添加一个高度属性的时候，第一个盒子就会被撑起来。

 


方法四： overflow: hidden;

 Overflow 的几个作用：

 作用一： 清除浮动

方法：在第一个盒子中添加overflow: hidden;属性。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            background-color: pink;
            overflow: hidden;
            *zoom: 1;/*兼容IE6*/
        }
        .box1 p{
            width: 100px;
            background-color: yellow;
            float: left;
        }
        .box2{
            background-color: skyblue;
        }
        .box2 p{
            width: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
</div>
<div class="box2">
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
</div>
</body>
</html>

 注意：  在box1中添加*zoom: 1;的原因是： 兼容IE6 ， 提高兼容性。

（1）可以给box2盒子添加 margin-top属性，让box1与box2分开。

（2）可以给box1盒子添加margin-bottom属性，让box1与box2分开。

 

使 box1 与 box2 分开有空隙的方法：

         1. 给box1 添加 margin-bottom属性。

         2. 给box2 添加 margin-top属性。

 

作用二： 切除(删除)超出的内容部分:

 没切除之前：

 

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            我是内容我是内容我是内容我是
            我是内容我是内容内容内容</p>
    </div>
</body>
</html>

 

切除超出内容之后： 在.box1中添加overflow: hidden;属性即可。

 

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            内容我是内容我是内容我是内容
            我是内容我是内容我是内容我是
            我是内容我是内容我是内容我是
            我是内容我是内容内容内容</p>
    </div>
</body>
</html>

作用三 ： 防止外面的盒子因为里面的盒子使用margin-top的时候被顶下来。

  两个属于嵌套关系的盒子，当设置里面盒子的margin-top的同时，外面盒子也会被顶下来。

 

属于嵌套关系的两个盒子：

 

当给里面的蓝色盒子使用margin-top: 20px;的时候：

 

当给box1（外面的盒子）添加一个overflow: hidden;属性的时候：

 

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <base target="_self">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 400px;
            height: 400px;
            background-color: red;
            overflow: hidden;
        }
        .box1 .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

总结：

两个具有嵌套关系的盒子，当给里面的盒子设置margin-top属性的时候，外面的盒子也会受到影响被顶下来，解决方法有两个：1. 给外面盒子设置边框 ，2.给外面盒子添加overflow: hidden;属性。第一种方法不推荐使用，因为如果外面的盒子是最大的body，虽然可以设置边框，但是在企业开发中是不允许的，在企业开发中我们不会给body设置一个边框的。所以遇到这样的问题就用第二种方法。

 

杨宗健
关注
专栏目录
清除浮动的五种方法详解
qq_43692768的博客
11-07 2万+
前言：   在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。   清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。 实例：   HTML代码基本代码 <!DOCTYPE html> <html lang="
清除浮动的几种方法详解
09-24
以下是对清除浮动的几种常见方法的详细解析： 1. **第一种方法：使用`clear: both`** 这是最传统的清除浮动方式，通过在父元素上设置`clear: both`，阻止了父元素内的后续元素与浮动元素相邻。但是这种方法需要...
清除浮动的方法
weixin_30781107的博客
08-06 120
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
清除浮动方法
Starjg101的博客
11-28 385
浮动对页面的影响： 如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0， 下面的元素会自动补位，所以这个时候要进行浮动的清除。 关于清除浮动的方式: 方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden...
清除浮动的几种方式，各自的优缺点？
weixin_30795127的博客
07-18 497
①给父元素单独定义高度 　　优点：简单快速、代码少。 　　缺点：无法进行响应式布局。 ②在标签结尾处加空div标签<div style="clear: both"></div> 　　优点：简单快速、代码少，兼容性较高。 　　缺点：增加空标签，不利于页面优化。 ③父级定义overflow:hidden 　　优点：简单快速、代码少，兼容性较高。 　　缺点：...
清除浮动的方式
space_walk的博客
10-10 368
清除浮动
css 盒模型 文档流 几种清除浮动的方法实例详解
09-22
在本文中，我们将深入探讨这些概念，并提供几种清除浮动的方法。 首先，让我们理解盒模型。盒模型分为两种类型：W3C标准盒模型（content-box）和IE盒模型（border-box）。默认情况下，大部分浏览器使用W3C标准盒...
CSS清除浮动的方法详解
09-24
总结来说，不同的清除浮动方法适用于不同的场景，选择哪种方法取决于项目需求、兼容性和代码维护性。通常，`:after`伪元素结合`clearfix`类是一种既高效又优雅的解决方案，但理解并掌握所有方法有助于应对各种复杂的...
清除浮动的四种方式及其原理理解
weixin_34072857的博客
10-18 3223
本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而不再死记或拘泥于文中提到的方法。 一、为什么要清除浮动 在讲清除浮动的方法之前，我们先来了解一下为什么要清除浮动，清除浮动的目的是什么，即，要解决什么样的问题。来看一个浮动的例子(略去了文字...
解释下浮动和它的工作原理？清除浮动的技巧
weixin_30799995的博客
05-13 195
动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 1.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 2.使用overflow。 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 3.使用after...
今日面试题：清除浮动的方法？
weixin_43572329的博客
04-22 221
父级div定义伪类：after和zoom div:after{ display:block;clear:both;content:"";visibility:hidden;height:0; } div{ zoom:1; } 浏览器支持好，两句代码结合使用，才能让主流浏览器都支持 在结尾处添加空div标签clear:both div{ clear:bot...
前端css清除浮动的方法
only_的博客
09-06 215
首先，清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。 解决方法： 1…额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；） <div class="fahter"> <div class="big">big</div> <div class="small">small</di...
浮动有哪些清除的方法
xuhaidady的博客
07-09 510
1.背景介绍浮动是怎么诞生的？浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已。但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在， 在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。2.知识剖析浮动到底是什么？ 浮动核心就一句话：浮动元素会脱离文档流...
HTML清除浮动：6种方法详解与示例
"本文主要介绍了HTML中清除浮动的六种方法，包括使用display: inline-block、浮动(float)等，并通过实例展示了这些方法的效果和特点。" 在网页布局中，浮动(float)是HTML和CSS中一个重要的概念，常用于创建多列布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值