前端7班+余愿
兩欄布局指的是衰琐，頁面分為三部分也糊，頭部、中間碘耳、尾部显设。而中間部分又分為兩部分，側(cè)邊欄和主要內(nèi)容部分辛辨。側(cè)邊欄可以在左邊捕捂，也可以在右邊瑟枫。如何實現(xiàn)這個效果呢，給頭部和尾部都設一個高度指攒，給中間部分的側(cè)邊欄和主要內(nèi)容也設一個相同的高度慷妙，且給側(cè)邊欄設置一個寬度。將側(cè)邊欄設置為浮動允悦，浮動到左邊還是右邊根據(jù)需求來定膝擂。如果設置到左邊，樣式如下所示：
Paste_Image.png
展示效果如下：
Paste_Image.png
這個時候隙弛，側(cè)邊欄是在左邊的架馋。而如果側(cè)邊欄和main部分都沒有設置高度，則會出現(xiàn)以下情況：
Paste_Image.png
因為側(cè)邊欄是向左浮動的全闷，右邊主要內(nèi)容部分的文字則會圍繞著側(cè)邊欄叉寂。要解決這個問題，有2種辦法总珠。
第1種屏鳍，給main加一個overflow:auto。原理是局服，給main加一個overflow:auto的話钓瞭，main就會形成bfc，自成一派規(guī)則淫奔。旁邊浮動元素就不會對main里面的元素產(chǎn)生影響山涡。
第2種，利用浮動和負邊距搏讶。讓main也浮動佳鳖，同時給側(cè)邊欄設置負邊距。（這里的前提是媒惕，在文檔流中系吩，將main的代碼放在側(cè)邊欄的前面。）但是在這種情況下妒蔚，側(cè)邊欄還是會擋住main穿挨，這時候給包裹側(cè)邊欄和main的容器設置一個padding-left：200px。然后給側(cè)邊欄設置一個相對定位position：relative和left：-200px肴盏。這時候科盛，側(cè)邊欄就不會擋住main了。
Paste_Image.png
效果如下：
Paste_Image.png
