css学习笔记4

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

属性：CSS float
CSS clear

DEMO1

div {
				height: 200px;
				width: 200px;
			}
			.box1 {
				background-color: yellow;
				float: right;
				
			}
			.box2 {
				width: 400px;
				background-color: black;
				float: right;
				height: 600px;
			}
			.box3 {
				background-color: pink;
				height: 400px;
				float: right;
			}
			.box4 {
				background-color: skyblue;
				width: 300px;
				float: right;
			}

左右浮动例子
Demo2`

div {
				height: 200px;
				width: 200px;
			}
			.box1 {
				background-color: red;
				float: right;
			}
			.box2 {
				background-color: yellow;
				float: left;
			}
			.box3 {
				background-color: black;
				height: 300px;
				width: 300px;
			}

嵌套浮动例子

Demo3

.father {
				/*height: 400px;*/
				width: 700px;
				border: #000000 1px solid;
				/*height: 200px;*/
				/*overflow: hidden;*/
				/*overflow: auto;*/
				/*display: table;*/
			}
			.clearFloat:after {
					content: "";	
					display: block;
					clear: both;	
					height: 0px;	
					visibility: hidden;	
			}
			.son {
				width: 200px;
				height: 200px;
			}
			.son1 {
				background-color: yellow;
				float: left;
				/*margin: 0 20px;*/
			}
			.son2 {
				background-color: hotpink;
				float: left;
			}
			.son3 {
				background-color: black;
				float: left;
			}
			.clear {
				/*clear: both;*/
			}