前端html——float元素浮动规则

float属性脱离文档流的行为
float:left移动：

• 往本行的最左边跑,跑到头之后往上面一行从右往左跑;
• 如果浮动元素的上一行是正常元素则浮动元素不能往上跑

1.页面内容

 <div id="one"></div>
	<div id="two"></div>
	<div id="three"></div>

2.页面样式

    *{
			padding: 0;
			margin: 0;
		}
		div{
			width: 300px;
			height: 150px;
		}
		#one{
			background-color: yellow;
			float: left;
		}
		#two{
			background-color: green;
			float: left; 				
		}
		#three{
			background-color: blue;
			float: left;
		}

3.

• 正常元素在排列自己位置的时候，会忽略他前面的浮动元素，而被叠在浮动元素下面，因浮动元素已经脱离文档流。
• 当里面存在内容时，浮动元素会把内容挤到一边

4.文字环绕
文字放在p标签中，图片放在单独的一个div中对应位置，给图片一个float

5.如果浮动元素的父级元素宽度不够放下这几个浮动元素，那么会从最后一个元素依次被挤到下一行