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;
			}

去除浮動影響後標籤按默認樣式顯示