CCS浮动(float)

最新推荐文章于 2023-04-07 15:09:47 发布

weixin_43312083

最新推荐文章于 2023-04-07 15:09:47 发布

阅读量861

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_43312083/article/details/98884393

版权

前端专栏收录该内容

85 篇文章

订阅专栏

浮动：让多个盒子在一行显示{ 可以用inline-block,但是会有缝隙，有很多缺点，不用这个。}

什么是浮动？

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

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		/*display: inline-block;*/
		float: left;
	}
	.up {
		width: 300px;
		height: 200px;
		background-color: pink;
	}	
	.down {
		width: 320px;
		height: 220px;
		background-color: purple;
		
	}
	</style>
</head>
<body>
	<div class="up"></div>
	<div class="down"></div>
</body>
</html>

浮动效果图如下：

浮动详细内幕特性

浮动脱离标准流，====脱标==== 不占位置，会影响标准流。浮动只有左右浮动。

浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

2. 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

3. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		height: 100px;
		background-color: pink;
		float: left;  /*可以让元素默认转换为行内块元素 特性*/
	}
	span {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;  
		/*妙用  如果已经给 行内元素添加了浮动 此时不需要转换了（不需要使用display,就可以指定宽高了）这个元素也可以有宽高*/
	}
	</style>
</head>
<body>
	<div>哒哒哒</div>
	<span>123123123</span>
</body>
</html>

重点在代码中的注释部分：