浅谈清除浮动的方法以及利弊分析

最新推荐文章于 2023-09-11 17:19:28 发布
最新推荐文章于 2023-09-11 17:19:28 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： 技术分享 文章标签： 浮动 清除浮动的方法 清除浮动的方法以及利弊
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gj1949/article/details/53464589
版权

引言：

一  浮动的产生对于我们对于网站的布局特别是实现图片环绕等带来了方便，但是在我们使用浮动的时候也产生了一系列的问题，因此我们再使用浮动以后必须对浮动进行清除。

二  在开始介绍清除浮动之前首先说下浮动的原理和过程，浮动脱离文档的普通流中，向左或者向右移动，直到碰到包含框或者另一个浮动框的边框为止，因此我们在清除浮动的时候应该参照他浮动的原理，所以清除浮动实际上也是闭合浮动的一个过程。

清除浮动的方法以及利弊：

1.方法一：父级定义overflow:hidden;

利：兼容性好，代码简单

弊：有特定的使用范围,父级需要有宽度，并且没有高度，并且不可以和定位一起使用

总结：可用性一般，在特定的情况下可以使用

代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">

                       .box{
width: 960px;
margin:20px 0 20px 0;
background: blue;
overflow: hidden;/*父级设置overflow: hidden;*/
/*overflow: scroll;
overflow: auto;*/
}


.div1{
width:200px ;
height:200px ;
background:red ;
margin:32px 0px 32px 32px;
float: left;
}
.div2{
width:200px ;
height:200px ;
background:yellow ;

}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
<div class="div2">
</div>
</body>
</html>

2.方法二：父级定义overflow：auto;  如果需要宽高都要滚动条也可以overflow：scroll；

利：此方法和方法一相似

弊：auto当子元素高度超过父元素会出现滚动条，scroll一定会出现滚动条

总结：可用性低，一般在明确需要滚动条的情况下可以使用，其他情况不推荐

代码示例见方法一

3.方法三：父级设置height；

利：方便简单，容易掌握

 弊：特定范围，只适合有固定高度的布局

 总结：可用性一般，只适合有固定高度的布局

 代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box{
width: 960px;
margin:20px 0 20px 0;
background: blue;
height: 264px;/*父级定义高度*/
}
.div1{
width:200px ;
height:200px ;
background:red ;
margin:32px 0px 32px 32px;
float: left;
}
.div2{
width:200px ;
height:200px ;
background:yellow ;

}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
<div class="div2">
</div>
</body>
</html>

4.方法四：父级元素也跟着浮动，并且下面的元素需要使用clear：both；

利：不明显

弊：左右的margin：auto会失效；另外父级浮动会产生很多新的问题

总结：可用性非常低，不推荐使用

 代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box{
width: 960px;
margin:20px 0 20px 0;
background: blue;
   float: left;/*父级元素也跟着子元素浮动*/
  
}
.div1{
width:200px ;
height:200px ;
background:red ;
margin:32px 0px 32px 32px;
float: left;
}
.div2{
width:200px ;
height:200px ;
background:yellow ;
clear:both/*下面的元素需要clear:both*/

}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
<div class="div2">
</div>
</body>
</html>

5：方法五：父级定义display：table；

利：将div变成表格的形式，用表格进行操作

弊：强制的转化成表格形式，在整个布局中会产生很多新的问题

总结：可用性非常低，不推荐使用

代码示例

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box{
width: 960px;
margin:20px 0 20px 0;
background: blue;
   display:table ;/*父级添加display：table*/
  
}
.div1{
width:200px ;
height:200px ;
background:red ;
margin:32px 0px 32px 32px;
float: left;
}
.div2{
width:200px ;
height:200px ;
background:yellow ;


}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
<div class="div2">
</div>
</body>
</html>

6：方法六：父级定义diaply：inline-block

利：通过转化父级的属性，从而对子元素进行操作

弊：左右的margin:0 auto; 会失效；(如果需要让元素居中可以给父级加text-align:center),使用时会产生新的问题

总结：可用性较低，不推荐使用

代码示例如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box{
width: 960px;
margin:20px 0 20px 0;
background: blue;
   display:inline-block ;/*父级添加display：inline-block*/
  
}
.div1{
width:200px ;
height:200px ;
background:red ;
margin:32px 0px 32px 32px;
float: left;
}
.div2{
width:200px ;
height:200px ;
background:yellow ;


}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
<div class="div2">
</div>
</body>
</html>

7：方法七：父级元素定义伪类：after和zoom

利：浏览器兼容好，目前主流方法，使用比较方便

弊：代码量较多，原理相对其他几种清除方法稍复杂（伪类：after其实就是在父级的后面添加一个伪元素并且对其设置相应的属性，display:block 设置生成的元素以块元素显示; height:0 避免因浮动而改变其高度；visibility:hidden 隐藏其生成的内容，并允许可能被覆盖的元素可以进行交互处理；content:"."生成的内容作为最后一个元素，无论是点还是其他都可以，zoom主要是做ie6 ie7兼容）

总结：可用性高，推荐使用，目前主流的清楚浮动的方法，我代码示例是在上面直接写的，建议使用的时候放在公共类中，提高其复用率

代码示例如下：

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box{
width: 960px;
margin:20px 0 20px 0;
background: blue;
   zoom:1/*父级设置zoom：1*/  
}
.box:after{display:block;
          clear:both;
          content:"";
          visibility:hidden;
          height:0
          } /*设置伪元素*/
.div1{
width:200px ;
height:200px ;
background:red ;
margin:32px 0px 32px 32px;
float: left;
}
.div2{
width:200px ;
height:200px ;
background:yellow ;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
<div class="div2">
</div>
</body>
</html>

8：方法八：父级定义：zoom：1     br加clear：both

利：不明显

弊：增加多余的标签

总结：可用性低，不推荐使用

代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box{
width: 960px;
margin:20px 0 20px 0;
background: blue;
zoom:1 ;
}

.div1{
width:200px ;
height:200px ;
background:red ;
margin:32px 0px 32px 32px;
float: left;
}
br{
clear: both;
}
.div2{
width:200px ;
height:200px ;
background:yellow ;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<br />
</div>
<div class="div2">
</div>
</body>
</html>

9：方法九：增加空标签设置clear：both（理论上clear有clear：left； clear：right，清楚左边的和右边的，除非       你非常确定你要清除的是左或者右，正常情况下可以直接clear：both 清除左右两边的）

利：使用简单，浏览器支持较好

弊：增加多余的空标签，影响整个代码视觉上的流畅性，并且不符合W3C规范 违反结构 样式 行为 三者分离原则

总结：可用度一般，此方法是之前常规的清除浮动的方法

代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box{
width: 960px;
margin:20px 0 20px 0;
background: blue;
zoom:1 ;
}

.div1{
width:200px ;
height:200px ;
background:red ;
margin:32px 0px 32px 32px;
float: left;
}
.clear{
clear: both;
}
.div2{
width:200px ;
height:200px ;
background:yellow ;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="clear">

</div>
</div>
<div class="div2">
</div>
</body>
</html>

最后：平常使用清除浮动一般都是我上述的几种方法，各个方法各有利弊，目前伪元素使用相对主流，空标签和         overflow：hidden以及设置元素高度根据实际情况使用，其他几种暂做了解，如果需要可以有选择性的使用。
高建的博客
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS清除浮动的四种常用方法及其优缺点
Moony_wy的博客
01-30 959
什么是CSS清除浮动？ 在非IE浏览器下，当容器的高度为auto（没有设置），且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 CSS四种常用的清除浮动方法：额外标签法清除浮动；父级添加overflow: hidden清除浮动; 父级添加after伪元素清除浮动；父级添加双伪元素清除浮动。
清除浮动的五种方法以及优缺点
zz130428的博客
12-14 1019
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。：添加许多无意义的标签，结构化比较差。：符合闭合浮动思想，结构语义化正确。：通俗易懂，书写方便。
清除浮动常用的四种方法及优缺点
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
03-12 2032
清除浮动主要是解决父级元素因为子级浮动引起的内部高度为0的问题。 1.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 （不推荐使用） 优点：通俗易懂，书写方便。 缺点：*添加许多无意义的标签，结构化比较差。 2.父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。但是必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 优点： 简单、代码少、浏览器支持好 缺点： 内容增多时候容易造成不会自动换行导致内
清除浮动的几种方式，各自的优缺点
m0_65415485的博客
08-13 183
较常用且推荐的清除浮动的方式是使用after伪元素清除浮动。它不需要增加额外元素，且语义化较好。优点：简单易实现，不需要增加额外元素，适用于父容器有确定高度的情况。缺点:需要在CSS中定义clearfix类，不够语义化。优点：简单易实现，适用于多个浮动元素相邻的情况。缺点:需要增加额外的无意义元素，不够语义化。优点：简单易实现，不需要增加额外元素。缺点：需要在CSS中定义伪元素样式。缺点：会出现滚动条，可能影响布局。优点：不需要增加额外元素。
清除浮动的五种方法及优缺点
sinat_56339532的博客
04-26 755
我们首先要思考：为什么要清除浮动？ 源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>清除浮动</title> <style> p{ float:left; height:50px; width:50px; background-color: red;
清除浮动的几种方式，各自的优缺点，推荐使用哪种？
最新发布
m0_71955188的博客
09-11 147
方法一：额外标签法  给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。 clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化比较差。 方法二：父元素添加overflow:hidden 通过触发BFC方式，实现清除浮动 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。 方法三：使用after伪元素清除浮动 优点：符合闭合浮动思想，结构语义化
浅谈凭证优惠促销之利弊
12-21
本文将围绕“浅谈凭证优惠促销之利弊”这一主题，深入探讨这种促销方式对超市管理的影响及其优缺点。 首先，凭证优惠促销的优势在于其能够刺激消费者的购买欲望。当超市提供优惠券、折扣券或者积分兑换凭证时，顾客...
浅谈制度化管理的利弊.doc
10-07
在本文中，我们将深入探讨制度化管理的定义、必要性、特点、优势以及潜在的弊端，并提出如何平衡制度化与人性化管理以实现企业整体优化。 一、制度化管理的定义 制度化管理模式是指企业依据预先设定的、被广泛接受...
浅谈零ESR滤波电容对反馈回路补偿的利弊
10-22
FAE博士： 　我出于好意做了一个调整，将电压模式控制DC-DC电源中的输出滤波电容换成了零等效串联电阻（zero-ESR）。调整后，电源在负载快速变化时却变得不稳定，把我老板气坏了。是不是任何调整都得付出代价？...
浅谈中小企业筹资方式的利弊
08-19
本文将分析几种常见的筹资方式，包括负债筹资和权益筹资，以揭示它们各自的优点和缺点。 ### 1. 负债筹资 #### (1) 银行借款 银行借款是中小企业最常用的资金来源。优点在于能够快速获得资金，且资本成本相对较低...
浅谈EPS外墙外保温系统使用锚栓的利弊分析.docx
11-15
3. 锚栓的利弊分析： - 利：锚栓能提供至少0.3KN的抗拉强度，有助于在特殊情况下保障系统的安全性。 - 弊：（1）锚栓可能导致防护面层在温湿度变化下的柔性变形受限，增加开裂风险；（2）负风压作用下，锚栓成为...
清除浮动有哪些方式？说说它们的优点和缺点？
a1016428360的博客
09-23 251
1、给父元素单独定义高度 优点：快速简单，代码少 缺点：无法进行响应式布局 2、父级定义 overflow：hidden；zoom：1（针对 ie6 的 兼容） 优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时 要注意 清除浮动方式 3、在浮动元素后面加一个空标签 clear：both；height： 0；overflow：hidden 优点：简单快速、代码少，兼容性较高。 缺点：增加空标签，不利于页面优化 清除浮动方式 4、父级定义 overflow：auto.
CSS清除浮动方法大全
11-28 209
这篇文章主要介绍了CSS清除浮动方法大全(小结)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 1、父级div定义伪类：after和zoom ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Left Right div2 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(I...
清除浮动的几种方式？各自的优缺点？
weixin_62889848的博客
01-06 130
清除浮动的几种方式？各自的优缺点？
清除浮动的方法及优缺点
shkstart的博客
06-30 608
清除浮动的方法及优缺点 概论 浮动最开始是为了实现页面中的图文环绕效果,如今被大家广泛用于页面布局之中。 浮动(float)这个属性让我们又爱又恨,爱的是它的功能,恨的是他的负作用,那我们今天就来看看它有什么负作用,我们如何解决这些负作用。 浮动产生的负作用 直接问题 由于子元素开启浮动,导致父元素在计算布局时,无视了内部开启浮动的的子元素,从而导致父元素的高度塌陷(父元素高度为0或者高度错误) 间接问题 1.背景不能显示 虽然父元素(parent元素)设置了background相关CSS样式,但是由于父元
清除浮动的最常用的四种方法，以及优缺点
热门推荐
h_qingyi的博客
07-29 28万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了   总结...
清除浮动的几种方法以及优缺点
weixin_58855537的博客
10-12 263
清除浮动是面试时的高频考点，所以也必须要掌握 我们写一个例子，定义一个box父盒子，里面有两个子盒子，父盒子不给高度，里面的两个子盒子浮动 <div class="box"> <div class="left"></div> <div class="right"></div> </div> .box { width: 400px; border: 5px solid red; .
C语言全局变量利弊分析：高效与维护挑战
全局变量在C语言编程中扮演着特殊的角色，它们允许不同的函数共享同一数据，尤其是在处理大型项目或需要频繁交流信息的情况下...掌握全局变量的利弊，以及如何有效地管理和利用它们，是C语言程序员必须具备的基本技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值