6.CSS布局篇之float布局

2021-08-12  本文已影响0人  双鱼九年

圣杯布局与双飞翼布局的目的:

三栏布局,中间一栏最先加载和渲染(内容最重要)

两侧内容固定,中间内容随着宽度自适应

一般用于PC网页

圣杯布局与双飞翼布局的技术总结:

使用float布局

两侧使用margin负值,以便和中间内容横向重叠

防止中间内容被两侧覆盖,一个用padding(圣杯布局),一个用margin(双飞翼布局)

手写clearfix

.clearfix:after { content:' ';display:table;clear:both}

.clearfix {*zoom:1} /*兼容IE低版本*/

上一篇 下一篇

猜你喜欢

热点阅读