CSS之float属性详解

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

我是梅哥

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

阅读量2.4k

点赞数 4

分类专栏： CSS

本文链接：https://blog.csdn.net/cjm13249425280/article/details/106038076

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

float官方文档概念

float属性指定一个盒子（元素）是否应该浮动，可以设置浮动方向。

css语法

float：left|right|none|inherit ；

属性值：

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置
inherit	规定应该从父元素继承float属性的值

例子(怎样一个浮动法）

简单来说就是让块级元素并排在一行当中显示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS之float详解</title>
	<style>
.left {
	height: 60px;
	width: 60px;
	background-color: #ffddee;
    float: left;
}
.right {
	height: 60px;
	width: 60px;
	background-color: #ffddee;
	float: right;
}
div {
    padding: 15px 20px;
    font-size: 14px;
    color: #333;
}

</style>
</head>
<body>
<div class="left">
    左浮动
  </div>
  <div class="right">
    右浮动
  </div>
</body>
</html>

在这里插入图片描述
如果我们把左右浮动给去掉那么块级元素就独自占一行（这个解说够清楚了吧）。

float会导致的问题

浮动元素会脱离文档流，因此，它无法使得其他元素和其相对位置关系保持正常。也无法使得自己的父容器正确计算自己的大小。(这个没那么好理解，继续往下看）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS之float详解</title>
	<style>
		.father {
			width: 200px;
			padding: 10px;
			background-color: #ffd664;
			border: 1px solid #aaa;
		}
		.left {
			height: 60px;
			width: 60px;
			background-color: #ffddee;
		    float: left;
		}
		.right {
			height: 60px;
			width: 60px;
			background-color: #ffaaee;
			float: right;
		}
		div {
		    padding: 15px 20px;
		    font-size: 14px;
		    color: #333;
		}
		.footer {
			width: 200px;	
			height: 100px;
			background-color: #eee;
			margin: 5px;
		}

</style>
</head>
<body>
	<div class="father">
<div class="left">
    左浮动
  </div>
  <div class="right">
    右浮动
  </div>
  </div>
  <div class="footer">
    底部块级元素
</div>
</body>
</html>

在这里插入图片描述
上图中我们可以看到：包裹左右浮动的父元素（黄色块）没办法包裹在其内部，这时候我们说是父元素高度坍塌，左右浮动块已经脱离了文档流，导致底部块级元素（灰色块)的位置不是我们想要的正常效果。要解决这种问题通常采用：清除浮动和闭合浮动。

清除浮动

清除对应的单词是 clear，对应 CSS 中的属性是 clear：left | right | both | none。

		.footer {
			width: 200px;	
			height: 100px;
			background-color: #eee;
			margin: 5px;
			clear: both; //新增清除浮动
		}

在这里插入图片描述
这时候我们看到只能使底部块级元素不受浮动的影响，正常显示（是我们想要的效果），但是父元素高度坍塌的问题并没有解决掉，所以我们采取闭合浮动的方式，而不应该是清除浮动。

闭合浮动

更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

<div class="father clear">
<div class="left">
    左浮动
  </div>
  <div class="right">
    右浮动
  </div>
  </div>

 .clear::after {
        	clear: both;
		    content: ".";
		    display: block;
		    height: 0;
		    visibility: hidden;
        }
        .clear {
        	*room: 1;//这里的room是什么鬼？？？下面解答
        }