浮動的標籤可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止
浮動標籤不佔文件的普通流空間
float浮動樣式
1、left：向左浮動
2、right：向右浮動
3、none：取消浮動
css部分
.box
.box>
.child1
.box>
.child2
="box"
>
="child1"
>子元素1
<
/div>
="child2"
>子元素2
<
/div>
<
/div>
static普通流定位(預設)，其中top，right，bottom，left無效
relative相對自身定位，保留文件流佔位空間
1、top:
10px; 表示相對自身偏移上邊10px
2、right:
10px; 表示相對自身偏移右邊10px
3、bottom:
10px; 表示相對自身偏移下邊10px
4、left:
10px; 表示相對自身偏移左邊10px
1、top:
10px; 表示相對於含有relative的父標籤偏移上邊10px
2、right:
10px; 表示相對於含有relative的父標籤偏移右邊10px
3、bottom:
10px; 表示相對於含有relative的父標籤偏移下邊10px在這裡插入**片
4、left:
10px; 表示相對於含有relative的父標籤偏移左邊10px
fixed相對於瀏覽器視窗固定定位，不會隨著滾動條移動，不保留文件流佔位空間
1、top:
10px; 表示相對於瀏覽器視窗偏移上邊10px
2、right:
10px; 表示相對於相對於瀏覽器視窗偏移右邊10px
3、bottom:
10px; 表示相對於相對於瀏覽器視窗偏移下邊10px
4、left:
10px; 表示相對於相對於瀏覽器視窗偏移左邊10px
1、top: 10px; 表示距離瀏覽器視窗偏移上邊10px後固定標籤位置
css部分
.box1
.box2
.box2>
.box2-child
.box3
.box4
="box1"
>relative<
/div>
="box2"
>
="box2-child"
>absolute<
/div>
<
/div>
="box3"
>fixed<
/div>
="box4"
>sticky<
/div>
CSS float 浮動屬性
本篇主要介紹float屬性 定義元素朝哪個方向浮動。1.頁面布局方式 介紹文件流 浮動層以及float屬性。2.float left 介紹float為 left 時的布局方式。3.float right 介紹float為 right 時的布局方式。4.相鄰元素含有float屬性 介紹相鄰元素含有fl...
CSS float（浮動）和清除浮動
float元素也稱為浮動元素，設定了float屬性的元素會根據屬性值向左或向右浮動。浮動元素會從普通文件流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。簡單來說，就是讓block元素無視float元素，讓inline元素讓流水一樣圍繞著float元素來實現浮動布局。1 背景不能...
css float樣式屬性
html 編寫過程中需要注意 規範，錯落有致即是其中最基本的要求，但是瀏覽器會將換行 之間多個空格解釋為乙個空格，但是這乙個空格有時會破壞整個頁面布局，如何解決呢？通過子元素浮動即可解決。設定元素浮動方向，該屬性有多個值 為了後期維護，需要縮排換行，換行後在html中，瀏覽器預設將多個空格視為乙個空...