一行文字左浮動(dòng)，一行不浮動(dòng)，二者不對(duì)齊？

產(chǎn)生這一現(xiàn)象的原因是浮動(dòng)元素的外邊距不會(huì)發(fā)生折疊，而普通情況下外邊距會(huì)發(fā)生折疊。

具體到這個(gè)例子里面，p1是浮動(dòng)元素，因此不會(huì)發(fā)生折疊，它會(huì)相對(duì)父元素的頂部計(jì)算外邊距；而p2的外邊距會(huì)發(fā)生折疊，所以它的外邊距是相對(duì)body來(lái)計(jì)算的。

而給父元素加上overflow:hidden樣式之后，父元素就會(huì)形成自己的BFC，因此p2的外邊距不再與body發(fā)生折疊，這時(shí)候p1、p2的外邊距都將相對(duì)父元素來(lái)計(jì)算，因此自然就對(duì)齊了。此時(shí)的情況如下圖所示：

而除了overflow:hidden之外，還有其他的方法也能讓p1、p2對(duì)齊：

• 把p1添加margin:0，讓p1沒(méi)有外邊距，自然就不會(huì)偏離了
• 給outer添加border，原理同overflow:hidden

浮動(dòng)會(huì)脫離普通文本流，p也不再占用一整行，所以會(huì)對(duì)不齊。

紅色的p莫名居中我就不知道為什么了

首先，盡量不要在css中使用id選擇器，id還是留給JS用吧。
但是為了最小改動(dòng)，這里就不改過(guò)來(lái)了，以題主的布局為基礎(chǔ)，那么我們開(kāi)始吧~

瀏覽器會(huì)給塊級(jí)元素一些margin和padding，在沒(méi)有重置margin和padding的情況下：

<style>
    .p1 {
        /* float: left; */
        background: green;
    }

    .p2 {
        background: blue;
    }

    #outer {
        /* overflow: hidden; */
        background: red;
    }
</style>

由于盒模型垂直外邊距折疊，上圖首先是p1和outer父子間的折疊，然后p1和p2兄弟間的折疊的結(jié)果。outer的高度為兩個(gè)子加一個(gè)外邊距的和。

折疊規(guī)則：
    相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是兩者間較大的值。
    相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
    兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的和。

當(dāng)p1浮動(dòng)時(shí)，代碼如下：

<style>
    .p1 {
        float: left;
        background: green;
    }

    .p2 {
        background: blue;
    }

    #outer {
        /* overflow: hidden; */
        background: red;
    }
</style>

看上圖，浮動(dòng)元素不參與父級(jí)的高度計(jì)算，但瀏覽器給的默認(rèn)邊距依然在，此時(shí)outer的高是p2給的，所以outer的背景色都被遮住了。因此看起來(lái)是錯(cuò)位的。

當(dāng)我們加上overflow: hidden;又是什么情況呢，如下：

<style>
    .p1 {
        float: left;
        background: green;
    }

    .p2 {
        background: blue;
    }

    #outer {
        overflow: hidden;
        background: red;
    }
</style>

看上圖，outer的背景又出來(lái)了，為什么呢？因?yàn)?strong>計(jì)算BFC區(qū)域高度時(shí)浮動(dòng)元素參與計(jì)算，也就是說(shuō)只要給父級(jí)創(chuàng)建BFC就可以了，當(dāng)overflow值不為visible時(shí)就能為父級(jí)創(chuàng)建BFC，這就是清除浮動(dòng)的原理。p1依然是浮動(dòng)的，所以跟p2重疊了，即遮住了p2的一部分。至于文本，float會(huì)使盒子脫離文檔流，但不會(huì)脫離文本流，這是它的特點(diǎn)，所以以前float就是用來(lái)做圖文混排的，用來(lái)布局只是功能的延伸使用。當(dāng)然，上圖可見(jiàn)此時(shí)瀏覽器給的padding和margin依然生效。

那么除了overflow: hidden;還有其他方式創(chuàng)建BFC嗎？當(dāng)然有：

float值不為none。
position值為fixed或absolute。
display值跟table相關(guān)，例如display: table-cell;

當(dāng)然不同的方式創(chuàng)建BFC達(dá)到的效果會(huì)不完全一樣，例如：

<style>
    .p1 {
        float: left;
        background: green;
    }

    .p2 {
        float: left;
        background: blue;
    }

    #outer {
        background: red;
    }
</style>

再例如：

<style>
    .p1 {
        /* 浮動(dòng)脫離文檔流 */
        float: left;
        background: green;
    }

    .p2 {
        background: blue;
        /* 
            絕對(duì)定位脫離文檔流
            p2寫在后面，把p1遮住了
            但也算是p1和p2“對(duì)齊”啊
         */
        position: absolute;
    }

    #outer {
        background: red;
        position: relative;
    }
</style>

再再例如：

<style>
    .p1 {
        float: left;
        background: green;
        display: table-cell;
        vertical-align: middle;
    }

    .p2 {
        background: blue;
        display: table-cell;
        vertical-align: middle;
    }

    #outer {
        background: red;
        display: table;
    }
</style>

上圖顏色錯(cuò)覺(jué)看起好像不對(duì)齊，去掉背景色就看到其實(shí)是對(duì)齊的。