正视CSS 08】巅峰对武之float你为什么要坍塌我的元素！！！
2024-06-09 07:16:44
前言
事情还要回答一个月前，当时寒冬老师搞了一道position的面试题，我当时有幸给看到了，而且正是我要去外地的那天。
于是我那天上午便开始入魔了，写完了博客才急急忙忙上飞机：
各位周末结束后都累了吧，那我们一起来看看【寒冬】的面试题吧（据说阿里的哟）
当时只是草草的回答了那道题，却没想到今天会再拿出来说事！对的，我还是搞不懂为什么float会导致元素坍塌！！！！
近期状况
我CSS的名师是：张鑫旭（自认入门的）
最近引导者：寒冬
我CSS方面的东西除了之前的积累，基本来源于此两人，各位可以关注下。
多数知识来源于张鑫旭，寒冬让我把整个知识串了起来，虽然素不相识，在此谢过了。
引出问题
我最近一直在思考float实现的原理。
我最开始根据各种学习后产生了一个认识，float破坏了行内框inline boxes
从而导致块级元素坍塌，因为块级元素的高是line-height撑起来的，而line-height又来源于line boxes。
但是最近学习了BFC后，知道float触发了bfc，导致其独立了出来，所以元素被包裹了，这也是overflow清楚浮动的原理。
那么float到底做了些什么事情呢？？？
虽然我昨天病了，这个问题却在脑中挥之不去，所以今天搞完js后，觉得还是有必要深究一下。
不研究就算了，一研究又发现一个高手，好像是前端观察，只不过我不认识罢了。。。我这里也不管他是谁了，开始今天的学习吧。
clear：none=>闭合浮动
关于这个问题，我其实也必将迷糊的，因为我在用自己形成的CSS世界观解释问题时候一说到清楚浮动就感觉奇怪！
clear对应属性：left, right, both, none
按道理说clear: none才是清除浮动啦
所以我们这里为他取名闭合浮动较为合理。而且他也解释了为什么overflow可以导致坍陷消失。
haslayout与block formatting contexts
IE7以下特有的layout以及BFC再次光临了，我都不知道最近有多少次提到他了。
通过之前我们的学习（清除浮动的具体例子我这里就不管了），想要解决高度塌陷的问题无非两种方案：
① 在浮动元素末尾加上clear: both 属性，强制其闭合元素
② 设置overflow或者display: table属性触发BFC（这里寒冬老师有不同的认识，他认为对名词触发不合适），从而解决坍塌问题。
关于BFC（现在他换了个马甲叫做flow root），大家应该相对熟悉了。
我的理解是所有normal flow的元素皆处于同一BFC，float元素处于一个BFC，每个绝对定位单独一个BFC
PS：此处有误请提出来。
我们的BFC可以解决上外边距叠加，可以强制包含float元素，通俗点说：
BFC就是一个独立的盒子，里面的子元素不会再布局上影响外面元素，BFC依然属于普通流
overflow闭合浮动的真相便是：
父级元素拥有了新的BFC，具有BFC的块级元素可以包含浮动！
以上好像是官方定义了，再往下面挖就没意思了。
IE6/7中没有BFC这个概念，其自身实现的haslayout基本等同于BFC。
所以我们在IE6/7中闭合浮动时候要加上一句，zoom: 1的属性触发haslayout
真相到此为止？
以上就是追寻后得到的真相，虽然我还是不太满意，虽然我还有点迷迷糊糊但是暂时这样吧，在今后一段时间里面，我还会再回来回看这个问题。
届时，我希望自己能找到自己想要的答案。
意外之喜
此次找寻答案过程中虽然没有完全得到我想要的答案，却意外得到了其它东西，他的名字便是inline-block。
对的，你没有看错，我要说的就是inline-block！
其实我们还是很喜欢人云亦云的，比如说我就一直认为IE7之前没有inline-block这个属性，其实这是大错特错的！
复制代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 span { height: 100px; border: 1px solid black; }
6 .ib { display: inline-block; }
7 </style>
8 </head>
9 <body>
10 <span class="ib">叶小钗</span> <span>叶小钗</span> <span class="ib">叶小钗</span>
11 </body>
12 </html>
复制代码
以上是标准浏览器，我们来看看我们的IE7：
大家看到了，虽然中间那块有问题，但是我们的inline-block是没有问题的！！！
其中中间那个家伙的底边没有了，大家知道是为什么的（layout）。
以上是行内元素，我们来看看块级元素的表现。
复制代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 div { height: 100px; border: 1px solid black; *zoom: 1 }
6 .ib { display: inline-block; }
7 </style>
8 </head>
9 <body>
10 <div class="ib">
11 叶小钗</div>
12 <div class="ib">
13 叶小钗</div>
14 <div>
15 叶小钗</div>
16 </body>
17 </html>
复制代码
我们来看看IE7的表现：
这家伙直接没有理我啊！！！所以说，并不是inline-block没有，而只是对块级元素的支持有问题罢了，所以我们对于块级元素需要这么干：
复制代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 div { height: 100px; border: 1px solid black; }
6 .ib { display: inline-block; *zoom: 1; *display: inline; }
7 </style>
8 </head>
9 <body>
10 <div class="ib">
11 叶小钗</div>
12 <div class="ib">
13 叶小钗</div>
14 <div>
15 叶小钗</div>
16 </body>
17 </html>
复制代码
虽然他们之间的间隔却没有了，却达到了我们的目标。问题又来了：
inline-block为什么会有莫名的间隔？
注意看图的朋友应该看到了，inline-block元素在现代浏览器中有间隔，我搞了很久查询确实是有！
这是因为默认情况下inline元素之间就有间隔（IE7不会有间隔）！
复制代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 div { height: 100px; border: 1px solid black; margin: 0; display: inline; }
6 </style>
7 </head>
8 <body>
9 <div class="ib">
10 叶小钗</div>
11 <div class="ib">
12 叶小钗</div>
13 <div>
14 叶小钗</div>
15 </body>
16 </html>
复制代码
IE7
这个问题你抓破头发都不会知道原因！！！
因为块级元素搞成inline的时候，在编辑器中换号了，浏览器认为换行就是一个空格，所以将他们写到一起吧！囧
此处我不再纠结下去了，附上抄来的解决空隙的代码：
复制代码
1 .dib-wrap {
2 font-size:0;/* 所有浏览器 */
3 *word-spacing:-1px;/* IE6、7 */
4 }
5 .dib-wrap .dib{
6 font-size: 12px;
7 letter-spacing: normal;
8 word-spacing: normal;
9 vertical-align:top;
10 }
11 @media screen and (-webkit-min-device-pixel-ratio:0){
12 /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
13 .dib-wrap{
14 letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
15 }
16 }
17 .dib {
18 display: inline-block;
19 *display:inline;
20 *zoom:1;
21 }
复制代码
结语
咳咳，其实我病了。。。我养伤去了，刚刚求妹子顶就有个兄弟踩了我下，现在求兄弟顶好吧。。。。
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/06/15/3137648.html如需转载请自行联系原作者
正视CSS 08】巅峰对武之float你为什么要坍塌我的元素！！！相关推荐
- CSS高度塌陷问题（float塌陷margin塌陷）
目录 一.float塌陷 1.问题 2.代码示例 3.解决方法 1.每个盒子设定固定的width和height 2.给外部的父盒子也添加浮动 3.给父盒子添加overflow属性. 4.父盒子里最下方 ...
- 一天搞定CSS： 清除浮动（float）--13
上一节已经说明了为什么要清除浮动了.这里我们就来解决浮动产生的各种问题. 为什么要清楚浮动? 地址:http://blog.csdn.net/baidu_37107022/article/detail ...
- 【正视CSS 02】inline与line-height、float、absolute的故事
前言 那是一个很久之前的故事了...之前我一直认为CSS最重要的是布局,将一个图片很好的以网页显示出来就是王道. 但是,经过后来慢慢入门后,才发现其实布局感觉不是很难了,倒是行内元素这个家伙深藏不露. ...
- CSS魔法堂：说说Float那个被埋没的志向
前言 定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...
- CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
- 【正视CSS 06】构建我们自己的世界观！
前言 我们很小的时候什么都不知道,于是什么都会是别人对我们解释,也许是父母,也许是师长,但是随着年龄的增大,我们会逐步形成自己的世界观,并且当我们有小孩时候,他会问我们很多问题,我们会为他解答,那么我 ...
- CSS布局最常用属性float（浮动）和position（定位）
在进行CSS网页布局时,对元素与容器进行布置与规划,最常用的两个属性就是浮动float和定位position.这两个属性的理解对CSS网页布局的学习非常重要.我们52CSS.com就这两个属性的相关知 ...
- CSS:盒子模型和清除float浮动的三种常用方法
目录 一:浮动产生原因: 二:浮动产生副作用: 三:浮动解决方法: QUESTION:CSS盒子模型清除浮动? ANSWER: 一:浮动产生原因: 一般浮动是什么情况呢?一般是一个盒子里使用了CSS ...
- CSS中的Position、Float属性的一些深入探讨
为什么80%的码农都做不了架构师?>>> HTML布局的基本要点: 如果要掌握.运用好Position.Float属性必须要对HTML的两个基本点有清晰的了解. 盒子模型(bo ...
最新文章
- 【常用技巧精选】尺取法
- kali linux有线连接不见网络图标不见（解决方案）
- DFT - Introduction to Test Models
- UAC bypass 理论学习
- 洛谷P4145 上帝造题的⑦minutes ②
- mysql日期序列填充_MySQL如何在范围内填充缺失的日期？
- UVA 12563 Jin Ge Jin Qu hao
- 蓝桥杯第六届国赛JAVA真题----奇怪的数列
- 再见DTC，你好Christmas Day
- NASA无人机障碍赛：专业选手Vs.人工智能，赌一赌谁赢？
- 模式实例之——单件模式实例
- Exchange Server 2013 OWA IIS重定向
- python3 selenium ie 拒绝连接报错_selenium+python自动化测试--解决无法启动IE浏览器及报错问题...
- wordpress 通过域名无法访问_使用WordPress搭建自己的内容发布平台
- js,jquery的数字型字符串变量比较大小
- matlab之图例legend的数字变量显示
- TPS65217DRSLR 电源管理IC 设计用于便携式设备
- 怎样快速将pdf在线转换成word免费版
- css3边框背景border-image
- 从零构建知识图谱-第二章知识图谱技术体系