清除浮动的四种常用方法及其优缺点

最新推荐文章于 2023-09-11 17:19:28 发布
最新推荐文章于 2023-09-11 17:19:28 发布
阅读量430 收藏
点赞数
分类专栏： CSS 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zx442008375/article/details/120253155
版权

清除浮动的四种常用方法及其优缺点

浮动带来的问题

众所周知，清除浮动主要是为了解决如下两个问题

1，子元素浮动导致父元素高度为0

浮动前

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container{
        width:300px;
        background: #f3e5f5;
        border: 5px solid #6a1b9a;
      }

      .box1{
        width:100px;
        height: 100px;
        background: #ba68c8;
      }

      .box2{
        width:100px;
        height: 100px;
        background: #ab47bc;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

image-20210912160808136

浮动后

.box1{
    width:100px;
    height: 100px;
    background: #ba68c8;
    float:left;
}

.box2{
    width:100px;
    height: 100px;
    background: #ab47bc;
    float:left;
}

image-20210912160906472

2，元素浮动后释放文档流导致布局混乱

浮动前

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

      .box0{
        width:100px;
        height: 100px;
        background: #ffcc80;
      }

      .container{
        width:300px;
        background: #f3e5f5;
        border: 5px solid #6a1b9a;
      }

      .box1{
        width:100px;
        height: 100px;
        background: #ba68c8;
      }

      .box2{
        width:100px;
        height: 100px;
        background: #ab47bc;
      }
    </style>
  </head>
  <body>
    <div class="box0"></div>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

image-20210912161213044

浮动后

.box0{
    width:100px;
    height: 100px;
    background: #ffcc80;
    float:left;
}

image-20210912161250393

清除浮动的四种常用方法

1，额外标签法

在container div的最后位置添加一个新的元素，并为其设置clear:both;

image-20210912160906472

接着之前父元素因为子元素浮动高度变为0的例子，我们给container div添加一个p元素并为其设置clear:both;，如下

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container{
        width:300px;
        background: #f3e5f5;
        border: 5px solid #6a1b9a;
      }

      .box1{
        width:100px;
        height: 100px;
        background: #ba68c8;
        float:left;
      }

      .box2{
        width:100px;
        height: 100px;
        background: #ab47bc;
        float:left;
      }
      
      .p1{
        clear:both;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
      <p class="p1">我是额外标签</p>
    </div>
  </body>
</html>

image-20210912162531927

可以看到浮动被清除了，父元素的高度也恢复了。

方法点评：

优点： 容易理解。

缺点： 语义化差，添加了无意义的元素

推荐指数： ☆☆☆☆☆

2，设置overflow触发BFC

通过设置overflow:hidden;或者overflow:auto;来触发BFC特性，使得其可以清除浮动。理论上讲，只要触发了BFC特性，该元素就可以清除浮动（即可包含浮动元素）。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container{
        width:300px;
        background: #f3e5f5;
        border: 5px solid #6a1b9a;
        overflow:hidden;
      }

      .box1{
        width:100px;
        height: 100px;
        background: #ba68c8;
        float:left;
      }

      .box2{
        width:100px;
        height: 100px;
        background: #ab47bc;
        float:left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

image-20210912163353057

方法点评：

优点： 使用简单，一小段代码即可生效。

缺点： 无法显示溢出的内容或者产生不美观的滚动条。

推荐指数： ☆☆☆☆☆

3，设置after伪元素

通过给container div设置after伪元素来清除浮动，其原理和额外标签法类似，但是after伪元素不占用DOM。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container{
        width:300px;
        background: #f3e5f5;
        border: 5px solid #6a1b9a;
      }

      .container::after{
        content: "";
        display: block;
        clear:both;
      }

      .clearfix{
        *zoom: 1; /*IE6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
      }

      .box1{
        width:100px;
        height: 100px;
        background: #ba68c8;
        float:left;
      }

      .box2{
        width:100px;
        height: 100px;
        background: #ab47bc;
        float:left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

image-20210912164920416

方法点评：

优点： 不占用DOM，渲染效率提高，结构语义化更好。

缺点： IE6-7不支持伪元素::after，考虑兼容得添加zoom:1触发hasLayout来清除浮动。

推荐指数： ★★★☆☆

4，设置before和after双伪元素

与设置after伪元素同理，增加设置before伪元素是为了解决元素上方浮动元素所带来的影响

增设before伪元素前

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

      .box0{
        width:100px;
        height: 100px;
        background: #ffcc80;
        float:left;
      }

      .container{
        width:300px;
        /* background: #f3e5f5; */
        /* border: 5px solid #6a1b9a; */
      }

      .container::after{
        content: "";
        display: block;
        clear:both;
      }

      .clearfix{
        *zoom: 1; /*IE6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
      }

      .box1{
        width:100px;
        height: 100px;
        background: #ba68c8;
        float:left;
      }

      .box2{
        width:100px;
        height: 100px;
        background: #ab47bc;
        float:left;
      }
    </style>
  </head>
  <body>
    <div class="box0"></div>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

image-20210912171406197

此例中，我们希望box0和container div各在自己的一行，这就需要用到before伪元素

增设before伪元素后

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

      .box0{
        width:100px;
        height: 100px;
        background: #ffcc80;
        float:left;
      }

      .container{
        width:300px;
        /* background: #f3e5f5;
        border: 5px solid #6a1b9a; */
      }

      .container::before,.container::after{
        content: "";
        display: block;
        clear:both;
      }
    
      .clearfix{
        *zoom: 1; /*IE6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
      }

      .box1{
        width:100px;
        height: 100px;
        background: #ba68c8;
        float:left;
      }

      .box2{
        width:100px;
        height: 100px;
        background: #ab47bc;
        float:left;
      }
    </style>
  </head>
  <body>
    <div class="box0"></div>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

image-20210912171846679

方法点评：

优点： 在设置单个after伪元素的优点的基础上，还确保了被设置容器的所在行的独立性。

缺点： IE6-7不支持伪元素::after，考虑兼容得添加zoom:1触发hasLayout来清除浮动。

推荐指数： ★★★★☆

MoeCodeFree
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
清除浮动的几种方式，各自的优缺点
m0_65415485的博客
08-13 173
较常用且推荐的清除浮动的方式是使用after伪元素清除浮动。它不需要增加额外元素，且语义化较好。优点：简单易实现，不需要增加额外元素，适用于父容器有确定高度的情况。缺点:需要在CSS中定义clearfix类，不够语义化。优点：简单易实现，适用于多个浮动元素相邻的情况。缺点:需要增加额外的无意义元素，不够语义化。优点：简单易实现，不需要增加额外元素。缺点：需要在CSS中定义伪元素样式。缺点：会出现滚动条，可能影响布局。优点：不需要增加额外元素。
清除浮动有哪些方式？说说它们的优点和缺点？
a1016428360的博客
09-23 248
1、给父元素单独定义高度 优点：快速简单，代码少 缺点：无法进行响应式布局 2、父级定义 overflow：hidden；zoom：1（针对 ie6 的 兼容） 优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时 要注意 清除浮动方式 3、在浮动元素后面加一个空标签 clear：both；height： 0；overflow：hidden 优点：简单快速、代码少，兼容性较高。 缺点：增加空标签，不利于页面优化 清除浮动方式 4、父级定义 overflow：auto.
清除浮动的几种方式，各自的优缺点，推荐使用哪种？
最新发布
m0_71955188的博客
09-11 145
方法一：额外标签法  给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。 clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化比较差。 方法二：父元素添加overflow:hidden 通过触发BFC方式，实现清除浮动 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。 方法三：使用after伪元素清除浮动 优点：符合闭合浮动思想，结构语义化
清除浮动的五种方法及优缺点
sinat_56339532的博客
04-26 753
我们首先要思考：为什么要清除浮动？ 源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>清除浮动</title> <style> p{ float:left; height:50px; width:50px; background-color: red;
清除浮动的方法及优缺点
shkstart的博客
06-30 606
清除浮动的方法及优缺点 概论 浮动最开始是为了实现页面中的图文环绕效果,如今被大家广泛用于页面布局之中。 浮动(float)这个属性让我们又爱又恨,爱的是它的功能,恨的是他的负作用,那我们今天就来看看它有什么负作用,我们如何解决这些负作用。 浮动产生的负作用 直接问题 由于子元素开启浮动,导致父元素在计算布局时,无视了内部开启浮动的的子元素,从而导致父元素的高度塌陷(父元素高度为0或者高度错误) 间接问题 1.背景不能显示 虽然父元素(parent元素)设置了background相关CSS样式,但是由于父元
CSS清除浮动的常用方法优缺点分析
09-27
为了解决这个问题，开发者通常会采用几种不同的清除浮动（clear float）方法。下面我们将详细探讨这些方法的优缺点。 1. **额外元素法** 这种方法是在浮动元素后面添加一个额外的非浮动元素，如`...
详解css清除浮动float的七种常用方法总结和兼容性处理
11-21
以下介绍七种常用的清除浮动的方法及其优缺点： 1. **添加空div法**：在浮动元素下方添加一个空的div，并设置`clear:both;height:0;overflow:hidden;`。这种方法简单直观，但可能会增加HTML结构的复杂性。 2. **给...
CSS教程：总结清除浮动的方法
09-27
每种方法都有其优缺点，选择哪种取决于项目的需求、浏览器兼容性以及对布局的灵活性。在实践中，通常会根据具体情况和目标浏览器范围来决定使用哪一种或多种方法组合。随着技术的发展，现代布局方法如Flexbox和Grid...
css hack之清除浮动(clearfix)
09-25
本文主要讨论了如何使用clearfix来清除浮动，并探讨了几种不同的实现方式及其优缺点。 首先，最传统的清除浮动方法是在浮动元素后面添加一个空的`<div class='clear'></div>`。这种方法虽然简单，但增加了HTML结构...
2016前端面试题及答案.docx
11-26
17. **清除浮动**：常用方法有空标签、overflow:auto、after伪元素，各有优缺点，例如空标签增加额外HTML，overflow可能导致滚动条，after伪元素在IE6不支持。 18. **JavaScript类型转换**：typeof返回的类型包括...
CSS清除浮动的四种常用方法及其优缺点
Moony_wy的博客
01-30 957
什么是CSS清除浮动？ 在非IE浏览器下，当容器的高度为auto（没有设置），且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 CSS四种常用的清除浮动方法：额外标签法清除浮动；父级添加overflow: hidden清除浮动; 父级添加after伪元素清除浮动；父级添加双伪元素清除浮动。
清除浮动的方式以及各自的优点、缺点
yzkdcsdn的博客
11-01 182
清除浮动的方式以及各自的优点 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear： both）不 推荐 o 优点：通俗易懂，方便 o 缺点：添加无意义标签，语义化差 2.父级添加 overflow 属性 （overflow：hidden）不推荐 o 优点：代码简洁 o 缺点：内容增多的时候容易造成不会自动换行导致内容被隐蔽掉，无法显示要溢 出的元素 3.给父级设置高度 o 优点：简单，代码少，容易掌握 o 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一 样时
清除浮动的方法以及优缺点
奶茶控
08-06 197
为什么要清除浮动？ 清除浮动是为了解决，父元素因为子级元素浮动而引起的内部高度为零的问题。 清除浮动的几种方式 1、额外标签法 使用方法：在浮动元素末尾添加一个空标签。 <div style="clear:both"></div> 虽然书写简单，但是额外增加了代码量 2、父级元素添加overflow属性 overflow:hidden; hidden会隐藏溢出部分内容 scroll：内容溢出时会产生滚动条 auto：不管内容有没有溢出都要添加滚动条 3、after伪元素清除浮
[html/css]清除浮动的相关技巧
day67794的博客
03-16 109
以前只了解得很浅显，转载了一篇不错的文，学习参考 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。下面总结8种清除浮动的方法（测试已通过 ie chrome firefox op...
清除浮动的几种方式和优缺点
m0_47759438的博客
01-06 276
在父元素结尾处添加空的div标签，clear:both。 优点：简单，代码少，浏览器支持好，不容易出问题； 缺点：不少初学者不知道其原理，如果页面浮动布局多，就要增加很多空div，让人感觉很不爽;这种方法不推荐使用，这是以前的一种使用方式。 给父元素添加before，after为元素。 优点：浏览器支持好，在ie8以上的ie浏览器以及其他非ie浏览器都支持 缺点：代码多 #content:after{content:"";display:block;clear:both;} 选择器:after{con.
浅谈清除浮动的方法以及利弊分析
gj1949的博客
12-05 1384
引言： 一  浮动的产生对于我们对于网站的布局特别是实现图片环绕等带来了方便，但是在我们使用浮动的时候也产生了一系列的问题，因此我们再使用浮动以后必须对浮动进行清除。 二  在开始介绍清除浮动之前首先说下浮动的原理和过程，浮动脱离文档的普通流中，向左或者向右移动，直到碰到包含框或者另一个浮动框的边框为止，因此我们在清除浮动的时候应该参照他浮动的原理，所以清除浮动实际上也是闭合浮动的一个过程。
区域地质灾害易发性分级方法对比分析研究.docx
11-30
研究表明，每种模型都有各自的优缺点，对于不同的研究区域，其精度各有差异；对于同一研究区适用性不同，总体来说，其模型评价精度差异较小，AUC(area under curve)值在 5%左右浮动。这表明地质灾害易发性评价是一种...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值