css之float详解

最新推荐文章于 2024-05-05 20:21:31 发布

机器猫zhao

最新推荐文章于 2024-05-05 20:21:31 发布

阅读量2.3k

点赞数 3

分类专栏： css 文章标签： html css 兼容性

本文链接：https://blog.csdn.net/zx_p24/article/details/53305145

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

浮动float属性值：

left：元素向左浮动

right：元素向右浮动

none：默认值。元素不浮动。

inhert：规定从父元素继承float的属性值；

浮动会让元素本身脱离文档流，对后面的元素会产生影响，会让后面元素文字环绕到浮动元素上。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		background: red;
	}
	.box2{
		background: green;
	}
	.box3{
		background: blue;
	}
	</style>
</head>
<body>
	<div class="box1">文字一</div>
	<div class="box2">文字二文字二</div>
	<div class="box3">文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三</div>
</body>
</html>

默认情况下，块元素不加浮动显示结果：

先给box1浮动，box2会占据到box1原来位置上，重合部分box1会覆盖box2上，也就是box2文字环绕到box1上

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		background: red;
		float: left;
	}
	.box2{
		background: green;
	}
	.box3{
		background: blue;
	}
	</style>
</head>
<body>
	<div class="box1">文字一</div>
	<div class="box2">文字二文字二</div>
	<div class="box3">文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三</div>
</body>
</html>

box1浮动后显示如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		background: red;
		float: left;
	}
	.box2{
		background: green;
		float: left;
	}
	.box3{
		background: blue;
	}
	</style>
</head>
<body>
	<div class="box1">文字一</div>
	<div class="box2">文字二文字二</div>
	<div class="box3">文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三</div>
</body>
</html>

再给box2浮动，box3会占据到box2原来位置上，重合部分box2会覆盖box3上，也就是box3文字环绕到box2上

box2浮动显示如下：

最后对box3浮动，由于box3文字太多，他的宽度是根据其内容宽度来决定，所以会挤下来，效果显示如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		background: red;
		float: left;
	}
	.box2{
		background: green;
		float: left;
	}
	.box3{
		background: blue;
		float: left;
	}
	</style>
</head>
<body>
	<div class="box1">文字一</div>
	<div class="box2">文字二文字二</div>
	<div class="box3">文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三</div>
</body>
</html>

但是问题来了，虽然浮动可以让几个块元素显示到同一行，但是如果页面中还有其它元素，会对其后面的任何元素会产生影响。

如果浮动元素有父元素时，浮动产生影响：背景不能显示；边框不能撑开；margin之不能正确显示。

所以这里引用怎样清除浮动，清除浮动的几种常用方法？

方法一：添加空元素

有几个浮动元素，在最后一个浮动元素下面添加一个<div style="clear:both;"></div>

方法二：给几个浮动元素的父级加高

如果这几个元素浮动了，给他们父级加固定高度，如果没有父级，就加一个父级。

方法三：给父元素添加浮动

如果一个元素下的几个子元素都浮动，那把这个元素也浮动，就会清除子元素的浮动。但缺点是会影响到父元素后面的元素的位置，而且有事如果父元素绝对定位，浮动不起作用。

方法四：给父元素加overflow:hidden;

这个方法IE6不支持，还有如果子元素大小超过父元素大小，出现显示问题。

方法五：使用css的after伪元素

.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
}

.clearfix{

zoom:1;//解决兼容性问题，会激活父元素的hasLayout，让父元素有自己的布局

}

机器猫zhao

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
css之float详解

浮动float属性值：left：元素向左浮动right：元素向右浮动none：默认值。元素不浮动。inhert：规定从父元素继承float的属性值；浮动会让元素本身脱离文档流，对后面的元素会产生影响，会让后面元素文字环绕到浮动元素上。 Document *{ margin: 0; padding: 0; } .bo
复制链接

扫一扫

专栏目录