欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css清除浮动float

程序员文章站 2022-05-28 22:29:54
一、浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性, 导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动, 所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生 ......

一、浮动产生原因

一般浮动是什么情况呢?一般是一个盒子里使用了css float浮动属性,

导致父级对象盒子不能被撑开,这样css 就产生了。

css清除浮动float

 

本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了浮动,

所以两个黑色盒子产生了,导致红色盒子不能撑开,这样浮动就产生了。

简单地说,浮动是因为使用了或或两者都是有了而产生的浮动。

二、浮动产生负作用 

1、背景不能显示
由于浮动产生,如果对父级设置了(css background背景css背景颜色css背景图片,而父级不能被撑开,所以导致css背景不能显示。

2、边框不能撑开
如上图中,如果父级设置了css边框属性(),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致之间设置了css padding、属性的值不能正确表达。特别是上下边的padding和不能正确显示

三、css解决浮动,清除浮动方法

当给两个div:left,right。加上float属性时可以看出div已经脱离文档流。.center已经起不了作用。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css浮动</title>
		<style>
		.center{
			margin: 0px;
			width: 1200px;
			border: 2px solid red;
			margin: 0px auto;
			
		}
			.left{
				height: 300px;
				width: 300px;
				background: wheat;
			    display: inline-block;/*首先这两个div都是块级元素先转换为行内元素*/
			   float: left;/*给左边的div加上float:left; div会往左浮动*/
			}
			.right{
				height: 300px;
				width: 300px;
				background:aquamarine;
			   display: inline-block;/*首先这两个div都是块级元素先转换为行内元素*/
			  float:right;/*给左边的div加上float:right; div会往右浮动*/
			}
		</style>
	</head>
	<body>
		<div class="center">
		<div class="left">我是左浮动</div>
		<div class="right">我是右浮动</div>
		</div>
	</body>
</html>
css清除浮动float