浮动

最新推荐文章于 2024-10-15 22:21:02 发布

纯情小码哥

最新推荐文章于 2024-10-15 22:21:02 发布

阅读量273

点赞数

分类专栏： CSS 文章标签：浮动

本文链接：https://blog.csdn.net/Liyunhao_haoge/article/details/102132828

版权

CSS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

浮动
指设置了浮动属性的元素会脱离文档流的控制，移动到其父元素中指定位置的过程。

语法：
选择器 {float: 属性值;}
说明：
left:元素向左浮动
right:元素向右浮动
none：元素不浮动（默认值）

浮动特性
浮动脱离文档流，不占位置，会影响文档流，浮动只有左右浮动。
浮动首先创建包含块的概念，浮动元素总是找它最近的父级元素对齐，但是不会超出内边距的范围。
浮动的元素排列位置，跟上一个元素（块级）有关系，如果上一个元素有浮动，则A元素项部会和上一个元素的项部对齐；如果上一个元素是标准流，则A元素的项部会和上一个元素的底部对齐。

如果块级元素添加浮动之后，会有行内块元素的特性。
浮动的目的：就是为了让多个块级元素同一行上显示。
实际应用过程中,通常要增加一个块元素作为父元素,才能将高度架起来,不会造成高度塌陷.

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div:first-child{
		width: 20px;
		height: 20px;
		background-color: green;
		float: left;
	}
	div:nth-child(2) {
		width: 40px;
		height: 40px;
		background-color: orange;	
	}
	div:nth-child(3) {
		height: 60px;
		background-color: red;
		float: left;
		/*本来没有设置宽度,块元素满一行的,但由于浮动具有了行内块元素,由内容决定宽度.*/
	}
	span {
		height: 100px;
		width: 50px;
		float: left;
		background-color: blue;
		 /*行内元素设置高度不生效,但浮动起来,就有了行内块元素特性*/
	}

	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div>123</div>
	<span>456</span>
</body>
</html>

效果如下：