CSS浮动、清除浮动、盒子模型、display属性

一、CSS浮动

浮动定义：让块级标签不独占一行。

使用场景：把块级标签放在一行。

float的值：left，right，none

 

举例：

<style type="text/css">
		.box1,.box2{
			width: 100px;
			height: 50px;
		}
		.box1{
			background-color:red;
			float: left;
		}
		.box2{
			background-color:blue;
			float: right;
		}
	</style>

浮动前：

浮动后：

 

浮动原理：

让元素脱离文档流，不占用标准流。

 

二、清除浮动

浮动后，后面的元素不管是块级还是行级元素，都不会显示在下一行。

box3和box1重叠：