一、浮動定位的定義
浮動打破了塊級元素獨佔一行的慣例，使多個塊級元素可以在一行顯示。
二、浮動定位的特點
1、浮動元素脫離了普通的文件流，在不在佔據頁面空間時，其他沒有浮動的元素會自動上前佔據浮動元素原來的頁面空間。
2、浮動元素會停留在父級元素的左邊或右邊，或者停留在其他浮動元素的邊緣。
3、浮動元素只會在當前行內浮動。
4、浮動元素依然位於父級元素內。
5、浮動定位可以讓多個塊級元素在一行顯示。
注：當浮動和display連用時，出現空格可以用font-size：0；或者margin：10px解決。
三、浮動定位的語法
float
float
:right;
/*右浮動*/
float
:left;
/*左浮動*/
float
:none;
/*預設，無浮動效果*/
四、清除浮動
作用：元素的浮動不僅影響自己的位置，還會影響到後續元素，要想不被影響，就可以使用清除浮動
語法：
clear
:left;
/*清除左浮動：清除當前元素左浮帶來的影響，當前元素不會上前展位並且不允許左邊有浮動元素*/
clear
:right;
/*清除右浮動：清除當前元素右浮帶來的影響，當前元素不會上前展位並且不允許右邊有浮動元素*/
clear
:both;
/*清除左所有浮動：清除當前元素左浮和右浮帶來的影響，當前元素不會上前展位並且不允許左邊或右邊有浮動元素*/
原因：由於浮動元素脫離了普通的文件流，不佔據父元素頁面空間，使的父元素無法撐起整個空間。
解決問題：
1.直接給父級元素設定高度
弊端：必須要知道父級準確的高度
2.設定父級元素的浮動
弊端：對後續的元素會有影響
3.設定父級元素overflow hidden或auto
弊端：如果子級溢位的話 會一起被隱藏
4.在父元素中追加乙個空元素（子元素）並且設定他clear：both
css基礎 float浮動
doctype html html lang en head meta charset utf 8 title float title style body per red style head body div class per div class red div 層疊樣式表 英文全稱 casc...
css基礎浮動相關知識
複習第六天的知識 1 元素的隱藏方式 display none 不會占用頁面的空間 visibility hidden 占用頁面的空間 2 display屬性值 display block 顯示為塊級元素 display inline 顯示為內聯元素 display inline block 顯示為...
CSS基礎 浮動與定位
1 浮動 float float 引數 none 預設 無浮動 left 左浮動 right 右浮動 2 清除浮動 clear clear 引數none 無效果 left 清除右浮動 right 清除右浮動 both 擴充父元素2.定位 position 引數 static 靜態定位 relativ...