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

最新推荐文章于 2022-07-09 19:43:34 发布
最新推荐文章于 2022-07-09 19:43:34 发布
阅读量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
    评论
专栏目录
浅谈凭证优惠促销之利弊
12-21
本文将围绕“浅谈凭证优惠促销之利弊”这一主题，深入探讨这种促销方式对超市管理的影响及其优缺点。 首先，凭证优惠促销的优势在于其能够刺激消费者的购买欲望。当超市提供优惠券、折扣券或者积分兑换凭证时，顾客...
浅谈零ESR滤波电容对反馈回路补偿的利弊
10-22
FAE博士： 　我出于好意做了一个调整，将电压模式控制DC-DC电源中的输出滤波电容换成了零等效串联电阻（zero-ESR）。调整后，电源在负载快速变化时却变得不稳定，把我老板气坏了。是不是任何调整都得付出代价？...
清除浮动方法及优缺点
zhangchunjiang2014的专栏
08-12 629
方法1：给父级div定义 高度 代码如下： .div1{background:#000;border:1px solid red; /*解决代码*/height:200px;} .div2{background:#f00;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%
清除浮动的几种方法以及优缺点
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; .
清除浮动的方法及优缺点
shkstart的博客
06-30 608
清除浮动的方法及优缺点 概论 浮动最开始是为了实现页面中的图文环绕效果,如今被大家广泛用于页面布局之中。 浮动(float)这个属性让我们又爱又恨,爱的是它的功能,恨的是他的负作用,那我们今天就来看看它有什么负作用,我们如何解决这些负作用。 浮动产生的负作用 直接问题 由于子元素开启浮动,导致父元素在计算布局时,无视了内部开启浮动的的子元素,从而导致父元素的高度塌陷(父元素高度为0或者高度错误) 间接问题 1.背景不能显示 虽然父元素(parent元素)设置了background相关CSS样式,但是由于父元
清除浮动的方法以及优缺点
奶茶控
08-06 201
为什么要清除浮动？ 清除浮动是为了解决，父元素因为子级元素浮动而引起的内部高度为零的问题。 清除浮动的几种方式 1、额外标签法 使用方法：在浮动元素末尾添加一个空标签。 <div style="clear:both"></div> 虽然书写简单，但是额外增加了代码量 2、父级元素添加overflow属性 overflow:hidden; hidden会隐藏溢出部分内容 scroll：内容溢出时会产生滚动条 auto：不管内容有没有溢出都要添加滚动条 3、after伪元素清除浮
清除浮动的方式以及各自的优点、缺点
yzkdcsdn的博客
11-01 184
清除浮动的方式以及各自的优点 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear： both）不 推荐 o 优点：通俗易懂，方便 o 缺点：添加无意义标签，语义化差 2.父级添加 overflow 属性 （overflow：hidden）不推荐 o 优点：代码简洁 o 缺点：内容增多的时候容易造成不会自动换行导致内容被隐蔽掉，无法显示要溢 出的元素 3.给父级设置高度 o 优点：简单，代码少，容易掌握 o 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一 样时
浅谈制度化管理的利弊.doc
10-07
在本文中，我们将深入探讨制度化管理的定义、必要性、特点、优势以及潜在的弊端，并提出如何平衡制度化与人性化管理以实现企业整体优化。 一、制度化管理的定义 制度化管理模式是指企业依据预先设定的、被广泛接受...
浅谈中小企业筹资方式的利弊
08-19
本文将分析几种常见的筹资方式，包括负债筹资和权益筹资，以揭示它们各自的优点和缺点。 ### 1. 负债筹资 #### (1) 银行借款 银行借款是中小企业最常用的资金来源。优点在于能够快速获得资金，且资本成本相对较低...
浅谈EPS外墙外保温系统使用锚栓的利弊分析.docx
11-15
3. 锚栓的利弊分析： - 利：锚栓能提供至少0.3KN的抗拉强度，有助于在特殊情况下保障系统的安全性。 - 弊：（1）锚栓可能导致防护面层在温湿度变化下的柔性变形受限，增加开裂风险；（2）负风压作用下，锚栓成为...
清除浮动的五种方法及优缺点
sinat_56339532的博客
04-26 756
我们首先要思考：为什么要清除浮动？ 源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>清除浮动</title> <style> p{ float:left; height:50px; width:50px; background-color: red;
清除浮动的几种方式和优缺点
m0_47759438的博客
01-06 280
在父元素结尾处添加空的div标签，clear:both。 优点：简单，代码少，浏览器支持好，不容易出问题； 缺点：不少初学者不知道其原理，如果页面浮动布局多，就要增加很多空div，让人感觉很不爽;这种方法不推荐使用，这是以前的一种使用方式。 给父元素添加before，after为元素。 优点：浏览器支持好，在ie8以上的ie浏览器以及其他非ie浏览器都支持 缺点：代码多 #content:after{content:"";display:block;clear:both;} 选择器:after{con.
CSS清除浮动的8种方法及优缺点
weixin_46165733的博客
11-22 252
浮动产生的影响 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及宽高属性。解决浮动引起的问题有多种方法，但是有些方法在浏览器兼容性方面有问题。 1.父级div定义高度 原理：给父元素手动添加height，可以解决父元素无法获取高度的问题。 优点：代码少，简单。 缺点：适合高度固定的布局。因为要给出确定的高度，所以高度和父级div不一样就会产生问题。 建议：建议在高度固定的布局中使用。 2.结尾添加空div标签 原理：结尾添加空的div标签，添加声明clear:both清除浮动，让父级
清除浮动的方法及其利弊
somous_ly的专栏
10-22 535
1、采用伪类:after进行后续空制的高度位零的伪类层清除  　　2、采用CSS overflow:auto的方式撑高  　　3、采用CSS overflow:hidden的方式产生怪异适应  　　4、采用display:table将对象变成table形式  　　5、采用div标签，以及css的clear属性  　　6、采用br标签，以及css的clear属性  　　7、采用br标签，
css清除浮动的意义
weixin_34344403的博客
10-06 113
例子 转载于:https://www.cnblogs.com/zuopin/p/5934154.html
浅谈CSS清除浮动
筱葭的博客
03-02 2487
1、为什么会出现浮动？ 浮动的产生的最根本的原因是为了实现文字环绕效果。 2、什么时候需要清除浮动？ 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示，如背景色不能显示等。 清除浮动前： 清除浮动后： 3、清除浮动的方法： （1）使用clear属性 使用空标签清除浮动：在需要清除浮动的父级元素
【CSS】清浮动的10种方法与利弊分析
让传奇成为传奇，让我们成为自己。
04-28 1063
一 、 给浮动元素的父级加高度；  分析：一般情况下，父元素的高度是由子元素来撑开，但由于子元素设置了浮动，所以会脱离文档流，父元素的高度为0，给父元素加高度，高度需要大于浮动子元素的最大高度。否则，会出现父元素包不住子元素的情况。具体效果，给父元素和子元素分别加背景色便可以看到。这里就不贴代码了。我本人并不支持这种方式，有“作假”嫌疑。 二、在浮动元素下加空标签 ；  样式为.
关于清除浮动的理解（个人理解）
F2691898750的博客
07-09 585
总所周知，子元素浮动会导致父元素高度塌陷，影响后续布局，出现布局重叠混乱等问题。清除浮动的作用就是使父元素拥有高度，不影响后续布局。清除浮动有五种方法，而大部分初学者常用的方法是给父元素加浮动。但这样会造成更大的浮动问题，导致一旦遇到结构复杂的情况时就会样式混乱。而使用伪元素清除浮动的意义，就是清除浮动之后，父元素拥有了高度，哪怕在之后不再使用浮动，也不会导致页面混乱，结构坍塌，后面所写的布局仍然是稳定正常的。这也是伪元素清除浮动最好用的原因，可以提前在公共样式中写好，之后直接添加类名使用伪元素清除浮动即可
为什么要清除浮动，目的是什么？
唐璜Taro的博客
07-04 3317
再观看文章之前，首先希望大家树立问题意识。 首先我们为什么要这么解决问题，这么做的目的是什么，要解决什么问题？ 然后套一下今天的问题（清除浮动）即： 我们为什么要清除浮动，清除浮动的目的是什么，要解决什么问题。 究竟什么是 CSS Float（浮动）？ CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 这是本次要讲解的清除浮动后的例子。 这张案例图片中，分为4个盒子。分别命名为topDiv（黑实线），flo
C语言全局变量利弊分析：高效与维护挑战
全局变量在C语言编程中扮演着特殊的角色，它们允许不同的函数共享同一数据，尤其是在处理大型项目或需要频繁交流信息的情况下...掌握全局变量的利弊，以及如何有效地管理和利用它们，是C语言程序员必须具备的基本技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值