前端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
网友评论