提到前端，相信作為開發者的你或是正在看這篇文章的你并不陌生。前端可以說是直接與使用者打交道的一個端口，不論是頁面前端亦或是後端界面的前端，都是直接與使用者對接的，是以前端設計對于一個網站或管理系統，都是至關重要的。一個好的前端能給使用者視覺上的沖擊，比如電商、門戶等網站；也能給使用者帶去很好的體驗，比如辦公系統、财務軟體等能讓使用者更好的去操作。就拿我們喜科堂的官網來舉例：如圖1所示
圖1 喜科堂官網首頁
通過喜科堂官網首頁圖，可以看出，不論從布局上、還是從色彩上，都給人帶來了不一樣的體驗。首先，它在布局上采用了比較常用的流式布局；其次，色彩搭配上也是非常得當的，伴随一些裝飾色彩，更加突出主題，同時也達到展示宣傳的效果。
你現在是不是已經開始心動了，是不是也想撸起袖子寫出一個漂亮的頁面，不要着急…。你要想寫出和别人一樣漂亮的頁面，肯定是可以的，但是需要具備以下三點：
熟悉HTML/CSS/JS。
熟練使用CSS中的布局。
會色彩的搭配，頁面的建構。
看到以上三點是不是有點膽怯了，或是有了放棄的念頭，但凡有此念頭的可以提醒自己，你行，你不能放棄。那我就來給你分享一下，我是如何從羨慕到想放棄再到我能行的，下面精彩的前端之路即将開啟！！！
下面我就拿頁面中最核心的東西—布局，來做一個技術經驗的分享：
要想讓頁面以不變應萬變，我們需要做到穩準狠。
穩，指的是在頁面布局中保持平穩，不論你這個頁面樓層蓋多高，蓋多厚，都不會坍塌，這才是穩。
那怎樣才能做到真正的穩呢？要想穩，必須要掌握以下幾點：
使用好float
利用好盒子模型
掌握好定位
首先，我們來看一下“float”的使用。
float從英文意思去了解，使“漂浮或浮動”的意思，那麼我們就可以了解為，讓html中的标簽元素漂浮或者是浮動起來。要知道，在HTML中，元素分為塊級元素、行内元素和行内塊元素，并且遵循文檔流，也就是我們所說的标準文檔流，從上到下，從左到右的讀寫方式。這種标準文檔流，在某些情況下限制了我們元素的展示和呈現，是以CSS給我們提供了float這個屬性幫助改變這種布局的局限性。
說到float，我們先來看看它的誕生記，float最初是用于做圖檔環繞的效果，後來發現float還有能改變元素性質的作用。在沒有使用float的時候，通常使用的是display這個屬性來改變元素的性質，但是發現display這個屬性雖然能讓元素并排顯示或者是獨自占一行，但是并排顯示的元素之間有空白間隙，并且不能讓元素進行左右布局，這時， float就有了用武之地。float不僅能改變元素的性質，還能讓元素之間沒空白間隙，也能讓元素進行左右布局，是不是突然覺得它非常perfect。話不多說，示例展示如
圖2：使用左浮動後的盒子
示例代碼：圖3
圖3：示例代碼
通過以上效果圖和示例代碼，可以看出通過對div塊級标簽的設定，讓原本獨自占一行的元素并排顯示，并且是無間隙的并排，同時還能讓div這個塊級元素轉換成行内塊元素。你之是以能看到一個空白間隙，是因為設定了左外邊距。當然你還可以試着讓盒子1左浮動，讓盒子2右浮動哦！現在就來小試牛刀吧。
既然知道float那麼厲害，有那麼多的優點，是不是在用的時候就沒有後顧之憂了呢？no！no！no！凡事有利也有弊，飯吃多了還會撐呢？你說是不，float也不例外。它的确能讓塊級元素更好的去排列展示，但是它也是有自己的若點的。
float既然是讓元素浮動，那麼它必定會讓元素脫離标準文檔了，如果元素脫離标準文檔流，本身的位置就會空出來，緊挨着它的元素就會跑到它的下面。可以看圖4所示：
圖4：float讓元素脫标的問題
由圖4，可以看出，盒子3跑到了盒子1的下面，眼尖的你應該還發現了一個問題，盒子3雖然跑到了盒子1下面，但是文字沒有被遮住，這就是float讓文字環繞的效果，它是不會壓住文字的，這也是float的初衷目的。通過圖4效果，知道了float原來也是有bug的，那還能用它嗎？答案是yes，正所謂魔高一尺道高一丈，你有你的bug，我有我的招。下面就來看看如何解決float帶來的浮動問題。
第一種解決辦法：最簡單直接，給盒子1和盒子2添加一個父容器，并且一定要給父容器設定高度，這樣盒子3就不會跑到盒子1下面了，不信，你可以試試哦。
第二種解決的辦法：可以給盒子3使用清除浮動的屬性clear：both來清除左右兩邊浮動影響。
第三種解決的辦法：可以在盒子3的前面添加一個div，給這個div設定clear屬性清除，但是這種情況缺點是會讓頁面多出一些無意義的标簽元素。
當然，你肯定會問，還有沒有更好的解決辦法呢？自然是有的，不過以上是咱們最常見的，由于文檔字數有限，你想和我這個屌絲女探讨這個問題，可以通過掃描下方的二維碼，給你分享更多的前端幹貨哦。
PS：看完這篇文章分享，如果受益匪淺，記得關注我，後續還會給不斷分享更多更多的幹貨。