CSS布局

单列布局

单列布局是最常用的一种布局，它的实现效果就是将一个元素作为布局容器，通常设置一个较小的（最大）宽度来保证不同像素宽度屏幕下的显示一致
优点：基本上可以适配超过布局容器宽度的各种屏幕
缺点：过度的冗余设计必然会带来浪费,有空白区域浪费

两列布局

左右宽度不相等，例如后台的菜单
左侧固定（次要布局），剩余宽度由另一列撑满（主要布局）

三列布局

左中（主要布局）右，例如github

布局实现

要实现两列布局或者三列布局，可以按照下面的方法：

• 为了保证主要布局的优先级，应将主要布局写在次要布局之前
• 将布局容器进行水平排列
• 设置宽度，即次要容器固定，主要容器撑满
• 消除布局的副作用，如浮动造成的高度塌陷
• 为了窄屏下也能正常显示，可以通过媒体查询进行优化

本文地址：https://blog.csdn.net/qq_35836269/article/details/107554148