屬性值
float 是最開始出現的壹種布局方式，主要解決：文本在圖像周圍環繞，也即應用於圖像。但是在css中，任何元素都可以浮動， 浮動元素會生成壹個塊級框 ，而不論它本身是何種元素。
元素壹般是處於普通流中，也即塊級元素獨占壹行，從上往下依次顯示布局。行級元素可以在壹行顯示多個，按照順序進行顯示布局。
而添加了 float 布局的元素則會脫離原來所在的文檔流。並 ‘漂浮’ 在當前所在的文檔流的位置（如果前壹個元素沒有添加 float 布局的情況下），由於當前元素文檔流實際上沒有被元素占用，因此當前元素之後的元素會按照普通流布局的方式，占用當前元素的文檔流。表現為： 丟失空間
也即：
此時由於第壹個元素添加了 float:left ，則脫離了原來的文檔流，後面元素會向上移動，占用第壹個元素的空間。
如果第二個元素也添加了 float ，那麽可以這樣去思考，由於第壹個元素的原因，第二個元素所處的文檔流變成了第壹個元素所處的文檔流，此時再給第二個元素添加 float ，那麽也會像第壹個元素壹樣，脫離當前的文檔流，使得當前元素和第壹個元素壹樣處於 '漂浮' 狀態，並緊跟著第壹個元素顯示壹排。
同樣，如果第二個元素後面還有其他元素，那麽也會向上移動，改變原來所處的文檔流位置。
註意：添加了 float 的元素，只是在會脫離當前所在的文檔流，但是仍然漂浮在當前文檔流 上壹層 ，而不是說直接脫離整個文檔流，跑到所有文檔流的最頂部 。
從上面案例可以看出，添加了浮動的元素會影響其後元素的布局。此外由於元素脫離原來的文檔流，且父盒子沒有添加高度屬性，那麽父盒子無法感知到子盒子的存在，因此父盒子不會被撐開。
知道了 float 帶來的不好的地方，則需要去清除浮動帶來的影響。
方法壹：采用css clear 屬性
將該屬性添加在被浮動影響的後面元素，即可以清除浮動
則受浮動影響的元素就可以正常顯示了
因此在受浮動影響的父元素，就可以利用此方法，在浮動元素之後新增加壹個元素，使新增加的元素清除浮動，這樣新增加的元素的位置就在浮動元素的下面，使得在壹定程度上實現了撐開盒子的作用。
方法二：BFC
其次還可以采用BFC，使得父元素形成獨立的空間，也即可以感知子元素的高度和寬度，在壹定程度上也不會影響外面的元素的布局。
浮動元素邊界不能超過父元素的padding
元素浮動後會變為塊元素包括行元素如 span ，所以浮動後的元素可以設置寬高。
通過形狀浮動可以讓內容圍繞圖片，類似於我們在word 中的環繞排版。要求圖片是有透明度的PNG格式。
shape-outside 定義了壹個可以是非矩形的形狀，相鄰的內聯內容應圍繞該形狀進行包裝。默認情況下，內聯內容包圍其邊框， shape-outside 提供了壹種自定義此包裝的方法，可以將文本包裝在復雜對象周圍而不是簡單的框中。
理解：使用形狀值來定義浮動區域的浮動，這將使得內聯內容會環繞著形狀，而不是產生浮動的邊框。
關鍵字屬性值
函數值屬性
url值
文字通過給定的圖片，並且通過計算圖片的透明度後獲取的形狀區域進行圍繞，這裏需要註意的是此效果必須在服務器端預覽，本地預覽會報圖片跨域問題，給定的圖片必須是有透明區域的圖片
漸變值
按照給定的漸變通過計算排除透明通道後得到的形狀，然後文字按照此形狀的邊緣進行環繞
最後：函數值/url/linear-gradient可以和關鍵字屬性值搭配使用，此時關鍵字屬性作為基本形狀提供相應的參考框盒。
clip-path 使用裁剪方式創建元素的可顯示區域。區域內的部分顯示，區域外的隱藏。且此方式原來的區域仍然存在，只是顯不顯示的問題。裁剪之後只有規定的區域可以顯示。
基本語法
其中：