本節書摘來自華章出版社《微信小程式：開發入門及案例詳解》一 書中的第3章，第3.2節，作者李駿 邊思，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
了解基本盒子模型後，本小節開始講解定位相關的内容，定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現在哪，或者相對于父元素、另一個元素甚至浏覽器視窗本身的位置。浮動和定位是我們常用的布局方案，wxss也支援flex布局方案，接下來我們将對這三種布局方案一一講解。
浮動不完全是定位，同時它也不是正常流布局，通過設定float屬性，浮動的框可以向左或者向右移動，直到其外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，文檔的普通流中的會表現的浮動框不存在一樣，其他内容會環繞過去，如圖3-5所示。
代碼如下：
上例中浮動區域在它目前的位置往左浮動，直至父元素内容框，其他文本都環繞而過。由于元素浮動時不在普通流中，這會導緻父級元素忽略浮動元素高度，形成坍塌，如圖3-6所示。
本例中父級元素的邊框并沒有包裹浮動框，雖然這是浮動的一個特性，并不是一個bug，但在某些情況下我們仍然希望在使用浮動的同時，父級元素的高度能包裹浮動元素，這時我們就需要了解和浮動的另一個屬性：clear（清除）。當設定元素clear時，可以確定目前元素的左邊、右邊或左右兩邊同時不能出現浮動的元素，如圖3-7所示。
在上例中有個特别有意思的現象，父元素雖然會忽略浮動元素（如浮動高度示例中産生的坍塌），但是不會忽略其他元素（包括清除浮動的元素），而清除浮動的元素總在浮動元素下方，是以在顯示時視覺上父元素就把所有元素都包含進去了，如上例中無論非浮動元素在哪裡，父元素邊框都包含了非浮動元素。利用這個特性，如果把上例中清除浮動的高度置為0使其看不見，這時父元素仍然會包裹它，這樣就能防止浮動元素父元素高度坍塌，網上利用after僞屬性清除浮動就是這個原理。這裡我們對比使用元素和after僞屬性2種實作方案，如圖3-8所示。
wxml檔案的代碼如下：
在實際項目中，為了複用性和便捷性，我們通常使用.clearfix類清除浮動。
元素的定位由position屬性控制，position有4種不同類型的定位，會影響元素框生成的方法：
static：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行内元素則會建立一個或多個行框，置于其父元素中，static是position的預設值。
relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute：元素框從文檔流中完全删除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。對于absolute來說，包含塊是離目前元素最近的position為absolute或relative的父元素，如果父元素中沒有任何absolute或relative布局的元素，那麼包含塊就是根元素。使用position布局後，元素原先在正常文檔流中所占用的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，不論原來它在正常流中生成何種類型的框。
fixed：元素框的表現類似于将position設定為absolute，不過其包含塊是視窗本身。
示例如圖3-9所示。