H5中有三種經典的佈局方式：

1、常規流佈局（文檔流、瀑布流等）：

• 所有元素在默認情況下都是使用常規流佈局
• 塊盒獨佔一行，行盒可以多個水平排列
  （小知識點： 包含塊：每個元素都有包含塊，包含塊決定了盒子的排列區域；大部分盒子的包含塊是它的父元素）
  如：

div{
    height: 100px;
    width: 100px;
    background-color: aquamarine;
}
p{
    height: 32px;
    width: 100px
    background-color: #09c;
}
span{
    height: 32px;
    width: 150px;
    background-color: #f40;
    border: 1px solid black;
}
a{
    height: 32px;
    width: 150px;
    background-color: pink;
}

<div>這是一個div盒子</div>
    <p>這是一個p段落</p>
    <span>這是一羣span標籤</span>
    <span>這是一羣span標籤</span>
    <span>這是一羣span標籤</span>
    <a href="#">這是兩個a標籤</a>
    <a href="#">這是兩個a標籤</a>

上面這些都是按照從上到下的順序依次排列的。

因為div和p是塊盒，所以它們會獨佔一行，而如果我們設定的寬度不夠，內容會掉出；而我們的span和a都是行盒，而且可以看到我們給它們設定的寬度是一樣的，但是它們在頁面中渲染的明顯有差別，那是因為行盒的寬高只和它們中的內容有關，它們的寬高都是由內容撐開的。

2、浮動

浮動最早設計出來是為了解決圖文環繞的問題，而浮動元素都有什麼特點呢？

• 所以浮動的元素，都會變成塊盒
• 浮動的元素會脱離文檔流（可以理解為常規流是在地面上，而浮動的元素都是在空中）
• 浮動元素的包含塊為包含塊的內容盒
• 浮動的元素，它的包含塊（父元素）自動計算高度時不會考慮到浮動元素（這就是我們常説的高度塌陷問題）
• 如果常規流的塊盒在浮動元素之前，那麼在後面的浮動元素會自動避開常規流塊盒，而如果是行盒的話則不避開（如果是左浮動，它就會直接去講行盒元素擠開）
• 如果浮動元素在前，那麼在後面的常規流盒子將會被浮動元素覆蓋（因為浮動了脱離了文檔流，就是沒有在文檔流的位子）
  如：我們在上面的代碼後面加上

<div>我是第二個盒子</div>
    <h1>我是h1塊盒</h1>

再給h1和前面的a元素加上左浮動，我們來看一下效果：

而我們如果需要在後面再佈局的時候會發現:

這個就是浮動帶着我們的副作用，而我們想要正常的佈局，就需要清除浮動：

1. 在後面添加一個空元素，然後style=“clear:both;”
2. 給父元素添加一個偽元素，來清除
3. 使用overflow: hidden;來解決，但是會將裏面溢出的子元素隱藏
4. 給父元素一個定高

高度塌陷：

.box{
            height: 100px;
            width: 100px;
            background-color: aqua;
            margin-bottom: 50px;
        }
        .boxtwo{
            height: 100px;
            width: 300px;
            background-color: brown;
            margin-top: 100px;
        }
        .boxthree{
            height: 50px;
            width: 50px;
            background-color: #008282;
            margin-top: 70px;
        }

<div class="box">1</div>
    <div class="boxtwo">
        <div class="boxthree">3</div>
        2
    </div>

這個時候我們看代碼，會覺得第一個盒子和第二個盒子之間的距離為150px,而第三個盒子會離第二個盒子的上邊有60px的距離，但是渲染的是這樣的麼？

都沒有達到，第一個盒子和第二個盒子之間只有100px的距離，這就是高度塌陷帶來的。

解決辦法：

1. 像兩個盒子套在一起的，最簡單就是給他們添加一個邊框就可以了
2. 添加如下注釋的聲明就也可以解決
   因為添加了這些聲明就會觸發盒子的塊級格式上下文（BFC），因為CSS在渲染每個盒子時都會有不同的渲染方式，BFC就是一塊獨立的渲染區，不會相互干擾。

3、定位（盒子的移動不會對其他元素造成影響）

1. 相對定位relative：不脱離文檔流，保留原來的位置（用來微調盒子的位置，也可以當絕對定位的帶頭大哥）
2. 絕對定位absolute：脱離文檔裏
3. 固定定位fixed：脱離文檔流（以視口為包含塊，會隨着視口的移動而移動）
4. 默認值static
   絕對定位：以第一個非static元素為包含塊