CSS定位布局---float浮动

float浮动

相关属性值：left（向左浮动）、right（向右浮动）

html页面

	<div class="content">
			<div class="red"></div>
			<div class="gold"></div>
			<div class="brown"></div>
		</div>

css样式

/*父元素*/
.content{
				width: 300px;
				border: 1px solid black;
			}
				/*第一个盒子*/
			.red{
				background-color: red;
				width:60px;
				height:60px;
			}
				/*第二个盒子*/
			.gold{
				background-color: gold;
				width: 70px;
				height: 70px;
			}
				/*第三个盒子*/
			.brown{
				background-color:brown;
				width: 80px;
				height: 80px;
			}

设置三个小的盒子，不同的背景颜色，当第二个盒子float 后

.gold{
float:left;
}

父元素的高度缩小 brown盒子上移， gold盒子浮起来，浮在第二个盒子brown的上面-----这就是float的高度塌陷
一旦盒子加上 浮动，它就会脱离文档流（即父元素中不保留它原本的位子，下面的元素会上移，继承它的位置）
但是若三个元素都加上浮动（举例：float：left）

.brown，
.red，
.gold{
      float:left；
}

由于三个盒子都脱离文档流，即父元素自动适应的 高度为0px

**

清除浮动

**
最常用的几种方法：

1. clear：属性值为left、right、both、al【其中clear:left/right 是清除上面元素的左/右浮动，both是 是清除上面元素的左/右浮动，all 是清除自身的浮动】
2. 给父元素设置宽高【上例中，可直接给.content设置相应的宽高】
3. overflow：hidden/auto;【溢出隐藏】
4. 给父级元素添加前置后置元素
   【.content：：after/before{
   content：“”；
   display：block;
   visibility：hidden；
   clear：both；
   }】
   浮动的特性：当内联元素（例如：span）或者块级元素（例如：div），加上浮动 后，会变成行内块元素（即相当于display:inline-block）

float浮动的适用场合：多个块级元素要显示在一行时，使用浮动。