页面布局的常见套路

需要支持IE8吗？

No！：Flex布局+弹性宽度    

Yes！：Float布局+定宽      可支持到IE5

 

原则：

• 不到万不得已不要写死width和height
• 尽量使用高级语法，如：calc、flex
• 如果是IE9以下，则全部写死

 

口诀：

1、float

子元素全部加：float：left（right）

父元素加： .clearfix

如果宽度不够，可以用 margin: 0 -4px;

2、flex

父元素加：display：flex

父元素加：justify-content：space-between；

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;
}/*IE6*/

 

例子：

1、float布局：

float导航条

 

float负margin布局

 

2、flex布局

flex导航条

 

flex的justify-content + flex-wrap布局法