这篇文章上次修改于 505 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

做响应式框架其中有两种方法,一个是采用“Float + Width”即浮动和百分比宽度,还有一种是采用“Flex”弹性盒。

我们作为前端开发学习者,多多少少都对 Bootstrap 框架比较熟悉吧?这个框架它就采用了“Float + Width”的方法。

但对于我而言, Bootstrap 作为一个前端框架,虽然可以大幅度的减少码代码的时间,提高写站效率,但是这并不能让我们能够对响应式布局做更多深入的认识和理解。所以呢,我就试着自己写了一个响应式框架,并命名为“Binkic Style”。

在写框架的过程中我发现一个问题。如果不使用 Float,框架将会跳行,而且无法按照我设置的宽度来“摆放”,同时,内间距、外间距均失效。而如果使用 Float,父元素就会塌陷,呈现出“包不住”子元素的效果。

Fix-Parent-Element-Collapse-1.jpg

经过我的学习,现在找到了几种解决方案可供大家学习参考。

1、对父元素使用 “Overflow” 属性

.container{
    overflow: auto;  /* 也可以使用 hidden,意为隐藏多出来的内容 */
}

2、给父元素设置 after 伪元素(Bootstrap 采用的方法)

.container:after{
    content: "";     /* PS:别以为这个空格没有作用,如果没有 content,after 伪元素则无效 */
    clear: both;      /* 清除浮动 */
    display: block;  /* 作为普通 DIV 的形式显示 */
}

3、给子元素设置固定的高度(不推荐在响应式网站使用)

.container > div{
    height: 500px;  /* 500像素的高度 */
}

最终效果:
Fix-Parent-Element-Collapse-2.jpg

源码地址:JSFiddle
如果对本文有什么疑问,欢迎在这里评论和我交流~