CSS浮动机制详解-优快云博客

CSS学习总结第三天

一、浮动(float)

普通流(normal flow)

前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

什么是浮动？

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

（通俗的解释就是原本在地上的物品飘起来了，把原来的地上的位置留给其他人）

浮动的目的：就是让多个div盒子能够在同一行显示，方便我们的布局，而且盒子与盒子之间没有距离

浮动只有左右浮动

不设置宽度，浮动不生效

在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; //粉色
		float: left;     //向左边浮动   /*可以让元素默认转换为行内块元素 特性*/
	}
	.down {
		width: 320px;
		height: 220px;
		background-color: purple;	//紫色	
	}
	</style>
</head>
<body>
	<div class="up"></div>   //div默认是块级元素，一行最多只能有一个块级元素
	<div class="down"></div>
</body>
</html>