一.问题重述

嗯,这个就是坍塌的盒子了。外部盒子本应该包裹住内部的两个浮动盒子,结果却没有。

二.问题出现的原因

3个盒子都只设置了width,而没有规定height,内部两个盒子分别设置了左右浮动。布局就这么简单,但结果和我们想象的却大不一样。

问题出现的原因是内部两个盒子都有float属性,而float属性会把元素从标准文档流中抽离,直接结果就是外部盒子丢了两个孩子,因为内部没有其它盒子了,所以外部盒子只包裹了文本节点内容,却把两个内部盒子扔在外面了。

三.解决方案

  1. 上面分析了问题出现的原因,不难找到第一种解决方案(既然孩子丢了,那就去找呗)

    ——给外部盒子也添加浮动

    把外部盒子也从标准文档流中抽离,让它和孩子们见面。

    缺点:可读性差,不易于维护(别人很难理解为什么要给父元素也添上float),而且可能需要调整整个页面布局

  2. ——在外部盒子内最下方添上带clear属性的空盒子

    可以是div也可以是其它块级元素,甚至最简单的:把<br style=”clear:both;” />放在盒内底部

    用最下面的空盒子清除浮动,把盒子重新撑起来。

    缺点:引入了冗余元素

  3. ——用overflow:auto清除浮动

    给外部盒子添上这个属性就好了

    非常简单

    缺点:应用边框边距可能会出现滚动条,影响外观

  4. ——用after伪元素清除浮动

    给外部盒子的after伪元素设置clear属性,再隐藏它

    这其实是对空盒子方案的改进,一种纯CSS的解决方案,不用引入冗余元素。这是书中推荐的也是网络上给出的最佳解决方案,但问题是[IE7-]并不支持after伪元素,书上说[IE6-]要配合hack:.wrapper{height:1%;}共同使用,暂且不论谁对谁错,因为[IE7-]好像根本不会出现问题,我们看图说话。

四.测试结果

(IE6/7的测试结果来自IETester,IE8与FF来自本机,Chrome结果与FF基本一致,但Chrmoe缩放不太科学,就没有截图。有趣的是仔细看截图可以发现:IE6/7/8展现效果都不一样。。。)

可以点击实验源码直接测试,至于哪种方法更好,不太好说,但从IETester测试结果来看,同样的代码并不会在IE中引发盒子坍塌问题,如果IETester没错的话,IE应该根本就不存在盒子塌陷的问题。

但有几个可选方案总是好的,可以根据具体情景做出选择。

题外话

其实还有一种最直接的办法:给每个盒子规定width和height,要多大给多大即可。但这并不算什么解决方案,因为这样的布局不是内容自适应的,但如果页面内容极少发生变动,这也是一个不错的方案,因为它的兼容性是毋庸置疑的。

CSS盒子坍塌问题的4种解决方案的更多相关文章

  1. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  2. CSS图片下面产生间隙的6种解决方案

    CSS图片下面产生间隙的6种解决方案 在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是 ...

  3. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  4. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  5. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  6. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  7. CSS 盒子的边距塌陷

    tip:为能更直观地学习,本文章已省略部分 css 样式代码. 我相信下面的情形大家在日常工作中常常碰到:在制作静态页面中,为了页面整体的协调与美观,我们想让子盒子 image-div 的上边沿距离父 ...

  8. CSS 盒子模型(一)

    CSS 盒子模型(一) 本人在校学生,主学后端,后来发现前端的基础都忘得差不多了才想着写文章回来复习!欢迎留言交流. 什么是盒子呢? 拿下举例,我们可以把每个红框都比作一个盒子,他们可以是任意的 HT ...

  9. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

随机推荐

  1. Saving Tang Monk II(bfs+优先队列)

    Saving Tang Monk II https://hihocoder.com/problemset/problem/1828 时间限制:1000ms 单点时限:1000ms 内存限制:256MB ...

  2. jquery 动态添加的代码不能触发绑定事件

    今天发现jQuery对动态添加的元素不触发事件,比如blur.click事件等 参考文章证明了我的结论,并给出了原因及解决方案 原因:程序找不到动态添加的节点. 解决方案:在绑定父元素后的子元素 $( ...

  3. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  4. 二叉查找树迭代器 · Binary Search Tree Iterator

    [抄题]: 设计实现一个带有下列属性的二叉查找树的迭代器: 元素按照递增的顺序被访问(比如中序遍历) next()和hasNext()的询问操作要求均摊时间复杂度是O(1) 对于下列二叉查找树,使用迭 ...

  5. nginx中图片无法显示

    如果没有配置虚拟主机,则修改nginx.conf. 如果已创建单独虚拟主机,则在vhost下找到指定的主机配置文件, 如:www.xxx.com.conf location ~ .*\.(gif|jp ...

  6. APScheduler 浅析

    前言 APScheduler是python下的任务调度框架,全程为Advanced Python Scheduler,是一款轻量级的Python任务调度框架.它允许你像Linux下的Crontab那样 ...

  7. mysql thread_cache 和 thread_pool 之间的关系

    线程池是Mysql5.6的一个核心功能,对 于服务器应用而言,无论是web应用服务还是DB服务,高并发请求始终是一个绕不开的话题.当有大量请求并发访问时,一定伴随着资源的不断创建和释放,导 致资源利用 ...

  8. qt基本类

    多firstpage secondpage thirdpage fouthpage  实现 多页面 xml解析 实现 按钮 和 slot实现 mysql数据库访问实现

  9. CocoStudio

    不知道从哪里下载的CocoStudio_Full_V1.0.0.1.1185392965.exe 安装后点击"Animation Editor"."UI Editor&q ...

  10. classification report 使用

    别人写的,但是还是有些不清晰,我最后补上了 最后一行:第一个0.7=(0.5*1+0*1+1*3)/5  其他类似 support行:在真实数据中y_ture中class 0有一个 class 1有1 ...