CSS float

最新推荐文章于 2023-10-26 16:48:06 发布

原创最新推荐文章于 2023-10-26 16:48:06 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

前端之HTML CSS 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了CSS中的浮动属性及其副作用，并提供了几种解决浮动副作用的方法，包括使用clear属性、overflow属性及zoom属性。

float 属性有四个参数值：left，right，none，inherit。

上述四个属性分别表示：左浮动，有浮动，无浮动，继承浮动。

如果一个元素设置了float属性，则它自动变成了块级元素。它主要是用来设置图像的环绕方式的。

CSS中有三种定位机制：

- 标准流（普通流）

- 定位

- 浮动

浮动使得元素脱离了标准流，用浮动的方式进行定位。然而，其他的元素也会相应地受到干扰，而浮动元素不再占有原始空间。它会导致父元素无法检测子元素的高度，而导致产生塌陷的问题。以上是浮动的原因及其副作用。（父元素可能无法将子元素包含在内，如下图）

浮动副作用的解决

- 手动给父元素添加高度（别用auto）

- 通过clear清除内部和外部浮动

- 给父元素添加overflow属性并结合zoom:1 使用

- 给父元素添加浮动

Clear属性（主要是避免相邻元素造成的塌陷）：

该属性有四个值：

+ clear:none

+ clear:left 不允许该元素左边有浮动对象

+ clear:right 不允许该元素右边有浮动对象

+ clear:both 不允许该元素两边有浮动对象

通过overflow以及zoom:

<!DOCTYPE html>
<html>
<head>
	<title>float</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{margin: 0;
			padding: 0;}
		.per{width: 500px;
				height: auto;
				border:1px #000 solid;
				overflow: hidden;
				zoom:1;}
		.test{width: 80px;
				height: 30px;
				background:red;
				border:1px #FFF solid;
				float: left;}
	</style>
</head>
<body>

	<div class="per">
		<div class="test"></div>
		<div class="test"></div>
		<div class="test"></div>
		<div class="test"></div>
	</div>
</body>
</html>