浮動佈局

讓咱們打開百度首頁新聞欄目，咱們會看到這樣的頁面佈局：

這個導航欄看上去是行內元素，由於一個個的導航是排在一行內的
而後咱們檢查一下是什麼標籤構成的

竟然是塊級元素li！那它是怎麼佈局成橫着一排的呢？其實有兩種方式值得推薦:
第一種是強行把li的display變成inline-block
第二種就是要讓元素「 浮動」起來。

浮動到底是什麼意思？
就是正常瀏覽器渲染規則是塊級元素是一個元素佔一行，一行一行的向下排。
浮動是在正常渲染的基礎上把這個塊級元素拿到"更高level"的平面上來

什麼？這個圖片仍是不直觀？那咱們直觀的用代碼來一會兒:

那麼咱們該怎樣才能完成想百度新聞頁面的相似排版呢？

根據剛剛的代碼上面咱們初步的瞭解了float的語法，下面是更徹底的參考，你們能夠試試讓大家的div「浮動」起來：

咱們接下來簡單的說一下第二種方案：
就是讓塊級元素變成行內塊元素

你們看到了效果卻是實現了，可是好像出現了一個bug

咱們是不但願這個「牙縫」存在的
這是一個因爲inline-block出現的渲染問題,解決方案是，在父級元素font-size:0px

問題就解決啦～
這個問題產生的緣由是：

這兩段代碼裏面是有空格的，那咱們把font-size給去掉而且把子元素的代碼空隙給去掉

問題也解決了！ 總結兩個inline-block元素之間要是有間隙的話，會產生空格的，若是把font-size變成0的話會把空格的字符兼具給抹掉