css浮动float属性

css浮动float属性

float属性在开发中经常被应用于页面布局，在页面中元素设置了float属性会根据它的属性值来进行向左或向右浮动。

一. 页面中float布局展示

设置一个基本的一个布局，如下：

<div class="box">
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
		</div>

.box{
				width: 600px;
				height: 350px;
				background: #00FFFF;
				overflow: hidden;/* BFC规范 */
			}
			.div1{
				width: 80px;
				height: 100px;
				background: #ADFF2F;
				margin: 10px;
			}
			.div2{
				width: 100px;
				height: 80px;
				background: #800080;
				margin: 10px;
			}
			.div3{
				width: 120px;
				height: 100px;
				background: #FF0000;
				margin: 10px;
			}

效果如下，在css中div为块级元素所以独占一行，根据标准流所以是自上而下排列。

当给页面中的块级元素（div1）加上**float:left;**属性，就会使块级元素进行浮动从而脱离标准流，效果如下：

由此看出：设置了浮动属性的元素在原本的位置上浮动到上层，和原本的元素不在不一个层次上，其次它去除了原本文档流中自身的位置，使得下面2个元素向上移动占据的该元素的位置。

二.float的特性

• 包裹性
• 破坏性

包裹性：

在浮动元素不定义宽度的情况下，浮动元素的宽高由内容撑开。

破坏性：

当给元素增加浮动属性流式性。所谓流式性，就是当块级元素没有设置宽度的时候，他会自动的设置成和父元素相同的宽度！而当元素一旦设置成了float之后，会破坏这种特性，在父元素没有指定高度时，子元素全部浮动，父元素的高度就会没有，从而必须设定一个宽度，将元素撑起来。