一、浮動

浮動其實我們之前學習的時候接觸過，就是使用 float 進行浮動，我們來看一下

然後我們來讓這個 a2 進行向左浮動

可以看到，我們這個 BBB 一下子就靠到了這個 AAA 的右側

這個就是 float 帶來的效果，這裡的 html 頁面已經脫離了這個標準流

二、clear 效果

clear 是可以清理掉這個懸浮的樣式，我們來使用一下

可以看到啊，我們讓 a2 向左浮動，a3 向右浮動，但是不難發現，這個 p 段落其實也向上移動了，我們給 a4 新增樣式，讓他沒有這個浮動

可以看到，我們將 clear 設定成 both 之後，這個 p 標籤是很好的顯示在這 AAA 和 BBB 的下面了

三、定位

定位我們使用到的是 position ，這個屬性有這樣的幾個值，一個是 static ，這個是預設的，也就是按照標準流進行定位。還有就是 relative，這個是相對於原本的標準位置進行偏移一定的距離。再來還有 absolute，這個是絕對定位，這個是以包含框為基準進行偏移的，最後還有一個 fixed ，這個是固定定位，是以這個瀏覽器為基礎進行定位，我們來一個一個看

1. static

其實這個預設的就是 static，也就是標準流定位

其實就根本沒有變化，因為預設的就是標準流定位，所以我們看不出來啥，去掉和加上都是一樣的

2. relative

我們讓 div2 的這個框的 position 設定成relative，並且給一個 right: 20px; 我們來看看效果

可以看到，跑掉了，相對於外面的 div1 向左移動了 20px

3.absolute

絕對定位，可以說是以後可能常用的東西，廢話不多說，直接上例子

可以看到啊，這個 div1 這個變成一條直線了，這個是因為我們沒有給這個 div1 設定高度，只有一個寬度，而且裡面的這個 div 沒有了，缺少內容之後就變成了一個直線，而裡面的 div2 變成了絕對定位之後，在舉例右側 20px 的地方顯示

絕對定位的基準是以包含框進行偏移，而包含框就是我們的 body

但是，我們再來修改一下

我們給這個 div1 進行設定 position 之後，這個 div2 就不以這個 body 進行偏移了，而是以 div1 為基準進行偏移 20px

這也就是說，我們這個包含框其實是最近的一個有 position 的標籤，如果沒有，那就是按照最大的包含框進行偏移，也就是body

4.fixed

fixed，這個呢和上面的 absolute 類似，但是這個就是按照瀏覽器的大小進行偏移，我們來看一下

相同的一段程式碼，只是修改了 position 的值，就變了成了另一種樣子

就這麼多，大家好好練習一下，有問題聯絡我QQ：2100363119

最近我的官網開了，歡迎大家訪問：https://www.lemon1234.com