温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

为什么需要css的清理浮动及其作用是什么

发布时间:2020-07-10 15:11:54 来源:亿速云 阅读:352 作者:Leah 栏目:web开发

今天就跟大家聊聊有关为什么需要css的清理浮动及其作用是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

一、为什么会出现浮动?

浮动(float)产生的最根本的原因是为了实现文字环绕效果;后来有人发现用它来做布局挺不错的,可以弥补传统布局上的一些不足,挺方便的。

二、为什么要清除浮动,css清理浮动有什么作用?

浮动(float)可以控制浮动框左右移动,直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候,此时就会出现“高度塌陷”:为什么需要css的清理浮动及其作用是什么

上图中父元素撑开的高度是padding带来的效果,父元素没有设置高度。

在父元素没有设置高度的情况下:

  • 如果父元素里的子元素没有设置浮动,那么父元素的高也会自动被撑开的,出现高度值;

  • 如果父元素里的子元素设置了浮动,那么父元素的高就不会自动被撑开的,也就没有高度值。

显然这样设置浮动后出现了一些问题,比如:

  1. 父元素的margin受到影响,无法实现上下左右居中,

  2. 若没有给父元素设置高度,浮动后父元素的高度没有被撑开,那么父元素就不会在显示屏上显示。

实例说明(背景色)

没有清除浮动:

为什么需要css的清理浮动及其作用是什么

清除浮动后:

为什么需要css的清理浮动及其作用是什么

三、怎样清除浮动

下面介绍css清除浮动的几个方法(实现上图效果):

1.使用带clear属性的空元素

使用空标签清除浮动:在需要清除浮动的父级元素内部的所有浮动元素后添加一个空标签(理论上可以是任何标签,但常用<div>和<p>)清除浮动,并为其定义CSS代码clear:both。

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 500px;
				margin: 50px auto;
				background-color: #CCCCCC;
			}
			.left{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #21B4BB;
			}
			.right{
				width: 100px;
				height: 50px;
				float: right;
				background-color: #21B4BB;
			}
			.clear{
				clear:both;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="left">left</div>
			<div class="right">right</div>
			<div class="clear"></div>
		</div>
	</body>
</html>

优点:简单,代码少,浏览器兼容性好。

缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。

2.使用CSS的overflow属性

使用overflow清除浮动:只需在需要清除浮动的元素中定义CSS代码overflow:auto或overflow:hidden即可。

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 500px;
				margin: 50px auto;
				background-color: #CCCCCC;
				overflow:hidden
			}
			.left{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #21B4BB;
			}
			.right{
				width: 100px;
				height: 50px;
				float: right;
				background-color: #21B4BB;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

优点:不存在结构和语义化问题,代码量极少

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素

3.使用CSS的:after伪元素

对父元素使用:after伪元素,设置display:table

display:table 使生成的元素以块级表格显示,占满剩余空间。

通过content: " "生成内容作为最后一个元素,至于content里面是什么都是可以的,CSS经典的是 content:".",有些版本可能content里面内容为空。

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 500px;
				margin: 50px auto;
				background-color: #CCCCCC;
				*zoom: 1;
			}
			.demo:after { 
				content: " ";
				display: table; 
				clear: both;  
			}  
			.left{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #21B4BB;
			}
			.right{
				width: 100px;
				height: 50px;
				float: right;
				background-color: #21B4BB;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

看完上述内容,你们对为什么需要css的清理浮动及其作用是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI