前端7班+余愿
兩欄布局指的是，頁面分為三部分，頭部、中間、尾部。而中間部分又分為兩部分，側邊欄和主要內容部分。側邊欄可以在左邊，也可以在右邊。如何實現這個效果呢，給頭部和尾部都設一個高度，給中間部分的側邊欄和主要內容也設一個相同的高度，且給側邊欄設置一個寬度。將側邊欄設置為浮動，浮動到左邊還是右邊根據需求來定。如果設置到左邊，樣式如下所示：
Paste_Image.png
展示效果如下：
Paste_Image.png
這個時候，側邊欄是在左邊的。而如果側邊欄和main部分都沒有設置高度，則會出現以下情況：
Paste_Image.png
因為側邊欄是向左浮動的，右邊主要內容部分的文字則會圍繞著側邊欄。要解決這個問題，有2種辦法。
第1種，給main加一個overflow:auto。原理是，給main加一個overflow:auto的話，main就會形成bfc，自成一派規則。旁邊浮動元素就不會對main里面的元素產生影響。
第2種，利用浮動和負邊距。讓main也浮動，同時給側邊欄設置負邊距。（這里的前提是，在文檔流中，將main的代碼放在側邊欄的前面。）但是在這種情況下，側邊欄還是會擋住main，這時候給包裹側邊欄和main的容器設置一個padding-left：200px。然后給側邊欄設置一個相對定位position：relative和left：-200px。這時候，側邊欄就不會擋住main了。
Paste_Image.png
效果如下：
Paste_Image.png
