清除浮动的几种方式，各自的优缺点

最新推荐文章于 2022-07-29 21:33:22 发布
最新推荐文章于 2022-07-29 21:33:22 发布
阅读量452 收藏 3
点赞数 1
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/105239540
版权

为什么需要清除浮动？

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同

清除浮动的几种方式

1）给设置浮动元素的父级div设置height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合浮动子元素高度固定的布局，要给出精确的高度，如果子元素高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
评分：★★☆☆☆

<!DOCTYPE html>
<html lang="zh">
 
    <head>
        <meta charset="UTF-8" />
        <title>CSS水平垂直居中实现方式--定位实现</title>
        <style type="text/css"> 
		   .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
		   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}	   
		   .left{float:left;width:20%;height:200px;background:#DDD}
		   .right{float:right;width:30%;height:80px;background:#DDD}
	    </style> 
    </head>
    <body> 
		<div class="div1"> 
			<div class="left">Left</div> 
			<div class="right">Right</div> 
		</div>
		<div class="div2">
		   div2
	    </div>
    </body>
</html>

在这里插入图片描述2）在浮动元素的后面加空div标签，设置clear:both

原理：在浮动元素的后面添加一个空div，设置clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，容易掌握，浏览器支持好，不容易出现怪问题
缺点：如果页面浮动布局多，就要增加很多空div，会产生很多无意义的标签
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
评分：★★★☆☆

<!DOCTYPE html>
<html lang="zh">
 
    <head>
        <meta charset="UTF-8" />
        <title>CSS水平垂直居中实现方式--定位实现</title>
        <style type="text/css"> 
		   .div1{background:#000080;border:1px solid red;}
		   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}	   
		   .left{float:left;width:20%;height:200px;background:#DDD}
		   .right{float:right;width:30%;height:80px;background:#DDD}
		      /*清除浮动代码*/
   		   .clearfloat{clear:both}
	    </style> 
    </head>
    <body> 
		<div class="div1"> 
			<div class="left">Left</div> 
			<div class="right">Right</div> 
			<!-- 清除浮动的div,clear:both -->
			<div class="clearfloat"></div>
		</div>
		<div class="div2">
		   div2
	    </div>
    </body>
</html>

显示效果同上

3）父级div定义伪类:after和zoom：1

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码
评分：★★★★☆

<!DOCTYPE html>
<html lang="zh">
 
    <head>
        <meta charset="UTF-8" />
        <title>CSS水平垂直居中实现方式--定位实现</title>
        <style type="text/css"> 
		   .div1{background:#000080;border:1px solid red;}
		   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}	   
		   .left{float:left;width:20%;height:200px;background:#DDD}
		   .right{float:right;width:30%;height:80px;background:#DDD}
		     /*清除浮动代码*/ 
		   .clearfloat{zoom:1}
		   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
		  
	    </style> 
    </head>
    <body> 
		<div class="div1 clearfloat"> 
			<div class="left">Left</div> 
			<div class="right">Right</div> 
		</div>
		<div class="div2">
		   div2
	    </div>
    </body>
</html>

显示效果同上

4）父级div定义overflow:hidden

原理：父级元素必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
评分：★★★☆☆

<!DOCTYPE html>
<html lang="zh">
 
    <head>
        <meta charset="UTF-8" />
        <title>CSS水平垂直居中实现方式--定位实现</title>
        <style type="text/css"> 
		   .div1{background:#000080;border:1px solid red;/*解决代码*/overflow:hidden;width:100%}
		   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:100%}	   
		   .left{float:left;width:20%;height:200px;background:#DDD}
		   .right{float:right;width:30%;height:80px;background:#DDD}	  
	    </style> 
    </head>
    <body> 
		<div class="div1 "> 
			<div class="left">Left</div> 
			<div class="right">Right</div> 
		</div>
		<div class="div2">
		   div2
	    </div>
    </body>
</html>

效果同上

5）父级div定义overflow:auto（代码和4）相同，只是把overflow:hidden改成overflow:auto）

显示效果同上

原理：父级元素必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧
评分：★★☆☆☆

6）父级div也一起浮动，其同级的div要设置clear:both并且margin-top失效

原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。
评分：★☆☆☆☆

<!DOCTYPE html>
<html lang="zh">
 
    <head>
        <meta charset="UTF-8" />
        <title>CSS水平垂直居中实现方式--定位实现</title>
        <style type="text/css"> 
           .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;float:left;}
           /*margin-top:10px失效*/
           .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%;clear:both;}       
           .left{float:left;width:20%;height:200px;background:#DDD}
           .right{float:right;width:30%;height:80px;background:#DDD}      
        </style> 
    </head>
    <body> 
        <div class="div1 "> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
        </div>
        <div class="div2">
           div2
        </div>
    </body>
</html>

显示效果，.div2的margin-top失效
在这里插入图片描述7）父级div定义display:table

原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题
建议：不推荐使用，只作了解
评分：★☆☆☆☆

<!DOCTYPE html>
<html lang="zh">
 
    <head>
        <meta charset="UTF-8" />
        <title>CSS水平垂直居中实现方式--定位实现</title>
        <style type="text/css"> 
           .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;}
           .div2{background:#800080;border:1px solid red;height:100px;width:98%;margin-top:10px}       
           .left{float:left;width:20%;height:200px;background:#DDD}
           .right{float:right;width:30%;height:80px;background:#DDD}      
        </style> 
    </head>
    <body> 
        <div class="div1 "> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
        </div>
        <div class="div2">
           div2
        </div>
    </body>
</html>

显示的效果
在这里插入图片描述8）结尾处加br标签clear:both

原理：父级div定义zoom:1来解决IE浮动问题，浮动元素结尾处加br标签clear:both
建议：不推荐使用，只作了解
评分：★☆☆☆☆

<!DOCTYPE html>
<html lang="zh">
 
    <head>
        <meta charset="UTF-8" />
        <title>CSS水平垂直居中实现方式--定位实现</title>
        <style type="text/css"> 
           .div1{background:#000080;border:1px solid red;/*解决代码*/zoom:1}
           .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}       
           .left{float:left;width:20%;height:200px;background:#DDD}
           .right{float:right;width:30%;height:80px;background:#DDD} 
           .clearfloat{clear:both}     
        </style> 
    </head>
    <body> 
        <div class="div1 "> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
            <br class="clearfloat" />
        </div>
        <div class="div2">
           div2
        </div>
    </body>
</html>

显示效果
在这里插入图片描述

LuckXinXin
关注
专栏目录
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
清除浮动的几种方式，各自的优缺点？
weixin_30795127的博客
07-18 493
①给父元素单独定义高度 　　优点：简单快速、代码少。 　　缺点：无法进行响应式布局。 ②在标签结尾处加空div标签<div style="clear: both"></div> 　　优点：简单快速、代码少，兼容性较高。 　　缺点：增加空标签，不利于页面优化。 ③父级定义overflow:hidden 　　优点：简单快速、代码少，兼容性较高。 　　缺点：...
HTML学习之路-1
luckyxiaoqi的博客
12-11 174
清除浮动有哪些方式？ （1）父级div定义height。 （2）结尾处加空div标签clear:both。 （3）父级div定义伪类:after和zoom。 （4）父级div定义overflow:hidden。 （5）父级div定义overflow:auto。 （6）父级div也浮动，需要定义宽度。 （7）父级div定义display:table。 （8）结尾处加br标签clear
清除浮动的各种方法总结
dianzongfan5428的博客
06-14 5431
很多人都有研究闭合浮动元素的问题，但是解决方法却不一样，也并不是每一种方法都尽善尽美。闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题，因此，这里我想总结一下目前经常用到的几种方法，并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 问题的提出： 最简单的一种情形就是我们把一个小的、固定宽度的div元素（比如导航、引用等）和其他元素内容一...
两种清除浮动的方法
挨踢笔记
12-30 718
两种清除浮动的方法: 方法一:常用,在浮动元素的后面紧接着加一个       方法二:浮动元素所在的父元素的样式里加一个"overflow:auto/hidden;" overflow:auto;”>       嘿嘿嘿…
清除浮动常用的四种方法及优缺点
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
03-12 2045
清除浮动主要是解决父级元素因为子级浮动引起的内部高度为0的问题。 1.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 （不推荐使用） 优点：通俗易懂，书写方便。 缺点：*添加许多无意义的标签，结构化比较差。 2.父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。但是必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 优点： 简单、代码少、浏览器支持好 缺点： 内容增多时候容易造成不会自动换行导致内
清除浮动的几种方法
Huang_DW的博客
08-30 507
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 当我给内部两个盒子加上float属性的时候，底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 清除浮动的方法 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 优点： 通俗易懂，书写方便。（不推荐使用） 缺点： 添
清除浮动的4种方式
奖励你一朵小红花❀的博客
01-26 869
前言: 首先我们要清楚 为什么要清除浮动？ 清除浮动主要为了解决父元素因为子元素浮动引起内部高度为0的问题 清除浮动的方法(最常用的4种) **1.额外标签法：**给谁清除浮动，就在某个元素后面添加一个空白的空标签 **优点：**通俗易懂，书写方便但是不推荐使用 **缺点：**添加许多无意义的标签，让结构复杂化 用法：我们给small清除浮动（在small后面添加一个空白的标签clear 类名可以随意写），然后设置clear:both; 代码展示: <div> <div class=
CSS清除浮动的常用方法优缺点分析
09-27
为了解决这个问题，开发者通常会采用几种不同的清除浮动（clear float）方法。下面我们将详细探讨这些方法的优缺点。 1. **额外元素法** 这种方法是在浮动元素后面添加一个额外的非浮动元素，如`...
css别忘记清除浮动clear:both
10-30
本文将详细介绍几种常用的清除浮动的方法，并分析各自的优缺点。 #### 一、使用空标签清除 这种方法是最简单的清除浮动方式之一，只需要在浮动元素后面添加一个空的`<p>`标签或者`<div>`标签，并应用`clear:both;`...
三栏布局的几种实现方式
Kotlin0139的博客
07-29 3415
三栏布局是一种经典的页面布局：在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化（简单来说就是两端固定，中间自适应）...
清除浮动8种
qq_45635596的博客
11-23 240
高度塌陷 产生原因 包含结构，父元素没有设置高度，所有子元素浮动 解决方法 1.给父元素添加高度，不适合自适应 2，结尾处加空div标签 clear:both <style type="text/css"> .div1{background:#000080;border:1px solid red} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;wid
清除浮动有几种方式
l624702662的博客
11-05 1382
清除浮动有几种方式 1、父级 div 定义 height 原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。 简单、 代码少、容易掌握 ，但只适合高度固定的布局. 2、结尾处加空 div 标签 clear：both 原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动， 让父级 div 能自动获取到高度 ，如果页面浮动布局多，就要增加很多空 div，让人感觉很 不好 . 3、父级 div 定义 伪类：after 和
清除浮动的几种方式？
shidongdong_csdn的博客
09-21 645
1.使用空标签清除浮动 clear:both 2.使用overflow:auto 3.用:afert伪元素清除浮动
清除浮动的几种方式
门小远的博客
06-11 257
1、父级定义高度 .content{ width:90%; margin:0 auto; } .header{ height:60px; width:100%; border:1px solid blue;
8种html+css清除浮动技巧及其优缺点
接下来的几种方法，如使用`overflow`属性、负边距（`margin`）或伪元素（`:before`和`:after`）清除浮动，虽然各有其适用场景，但可能存在兼容性问题，尤其是在处理老版本浏览器时。对于现代项目，这些方法可能不是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值