css浮动属性

一、为何须要浮动

       HTML中的标签元素大体分为三类：块状元素、内联元素、内联块元素。

       每种元素都有其各自的特色，其中块状元素会独占一行，而内联元素和内联块元素则会在一行内显示。若是咱们想让两个甚至多个块状元素在同一行显示，这就须要用到css的浮动属性。

二、什么是浮动（float）

       浮动（float）是css样式中的一个属性，主要用来对HTML页面元素进行布局。

       设置浮动属性后的标签能够向左向右移动，直至碰到另外一个浮动元素或者它的父元素边界。

三、属性以及用法

属性值	做用
none	元素不浮动，按默认位置显示
left	元素向左浮动
right	元素向右浮动
inherit	继承父元素浮动属性

       在一个盒子里放置三个p标签并设置它的宽度和高度，给它们一个背景色

<div class="box">      
			<p class="p1"></p>             <!-- 红 -->
			<p class="p2"></p>				<!-- 蓝 -->
			<p class="p3"></p>				<!-- 黄 -->
		</div>

多元素同行显示

       若是咱们想让p1 和p2在同一行靠左显示，其中一种方法就是给p1和p2 都设置float属性

.p1{	float: left;	}
			.p2{	float: left;	}

       这时p1和p2实现了在同一行靠左显示，可是p3却向上跑到了p1和p2的下面。
       咱们能够发现float属性的一个特色：当一个标签使用float属性进行浮动时，会跑到上层显示，后面紧跟的标签会按照默认样式无视浮动标签在原层面进行排列。

实现文字环绕效果

       在网页中插入一张图片并写一段话，并简单设置样式

为图片添加一个 浮动属性让其向右浮动

img{		float:right;		}

从图中咱们能够看到图片浮动，虽然遮挡住了p标签，可是并无遮挡住文字，文字会将浮动的标签环绕包围，出现文字环绕的效果。

四、如何清除浮动对下方标签的影响：clear属性

给被影响的标签设置clear属性，指定标签的左侧或右侧不容许存在浮动的元素。

属性值	做用
left	左侧不容许浮动
right	右侧不容许浮动
both	两侧都不容许浮动
inherit	继承父元素的clear属性
none	默认值，按默认位置显示

图片设置左浮动以后，若是不想影响下方标签的位置显示， 就为其添加clear属性

img{
				float: right;
			}
			p{
				clear: both;
				background: orange;
			}

去除浮动影响后标签按默认样式显示