摘要：破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。
前言
在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。但是有很多情况，正常流是没办法实现的，因此我们需要一些手段来破坏流，从而实现一些特殊的布局，而本节的主角float就具备破坏流的特性。
float设计的初衷很多新手在布局的时候，总喜欢用float来实现。例如一个三栏布局，左右固定，中间自适应，有些人会通过float来一列一列把它们砌起来。这样的布局极其容易崩溃，只要高度或者宽度稍微有些变化，整个页面都会错乱。因此float设计的初衷并不是用来布局的，其本意仅仅是实现图片文字环绕效果，即图片左浮动，文字环绕图片，如下图所示：
.float {
width: 150px;
float: left;
}
.content {
width: 400px;
}
float的特性
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
一个元素设置了float属性，会表现出如下特性：
包裹性
块状格式化上下文
破坏文档流
没有margin合并
包裹性包裹性包含了包裹和自适应两个特性。
包裹指的是一个浮动元素，如果子元素宽度足够小，则浮动元素的宽度就是该子元素的宽度，如下所示：
.float {
float: left;
}
这是浮动元素的子元素
自适应指的是如果浮动元素的父元素有设置宽度，并且浮动元素的子元素宽度超出了父元素，则浮动元素的宽度最终表现为父元素的宽度，如下所示：
.father {
width: 100px;
}
.float {
float: left;
}
块状格式化上下文这是浮动元素的子元素
设定了float的元素，其display的最终值会表现为block或者table，具体转换如下表：
| 设定值 | 计算值 |
|---|---|
| inline | block |
| inline-block | block |
| inline-table | table |
| table-row | block |
| table-row-group | block |
| table-column | block |
| table-column-group | block |
| table-cell | block |
| table-caption | block |
| table-header-group | block |
| table-footer-group | block |
因此，设置了float的元素，下面的写法是多余的：
.float {
float: left:
display: block;
}
.float {
float: left;
vertical-align: middle; /* 不起作用 */
}
格式化上下文属于BFC的内容，此处先不展开。
破坏文档流这是float最本质的特性，因此float设计的初衷就是破坏文档流。设置float的元素，会导致父元素高度塌陷，我们来看个例子：
.float {
float: left;
}
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
可以看到，父元素的高度为0，但这不是bug，而是float本身就是这样设计的，因此只有让父元素高度塌陷了，后面的元素才有机会浮上来。但是仅仅是这样还是不可以形成图片环绕效果的，不然文字浮上来就只会覆盖在图片上面。这里面还隐藏着一个特性：
行框盒子和浮动元素的不可重叠性
意思是说行框盒子和浮动元素不会发生重叠，因此，下面的文字浮上去之后才不会覆盖在图片之上。即使我们给文字设置margin负值也不会起作用。
没有margin合并设置了float的元素，由于形成了BFC，因此也就没有了margin合并。
float作用机制我们先来看个例子：
.float {
float: right;
}
标题 链接
在标准浏览器下，“标题”和“链接”会在同一行展示，并且“链接”会浮动在右边。但是如果“标题”非常长，一行放不下呢，“链接”是浮动在第一行还是第二行呢？答案是第二行，要想解释这个，我们得先理解两个概念，一个是“浮动锚点”，一个是“浮动参考”：
浮动锚点是float元素所在的“流”中的一个点，这个点本身并不浮动，表现得就像是一个没有margin、padding和border的空的内联元素。
浮动参考指的是浮动元素对齐参考的实体。
float元素的“浮动参考”是行框盒子，也就是float元素在当前“行框盒子”内定位，因此，上面的例子“链接”会在第二行展示。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是“浮动锚点”在起作用。因为“浮动锚点”表现得像一个内联元素，有内联元素，自然就有行框盒子，只是这个盒子看不见也摸不着罢了。
float实现流体布局前面文字环绕的例子，只要稍微改造一下就可以实现两栏或多栏的自适应布局，代码如下：
.father {
overflow: hidden;
height: 200px;
}
.float {
float: left;
width: 100px;
}
.content {
margin-left: 120px;
}
总结文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
float设计的初衷不是布局，而是文字环绕效果
float的特性：包裹性、块状格式化上下文、破坏性、没有margin合并
float的机制：浮动锚点和浮动参考
float实现自适应布局的思路
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113775.html
摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为围绕元素排列。从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。 张鑫旭的CSS深入理解之float浮动学习笔记 float的历史 float为产生文字环绕效果而生 float的特性 — 包裹和破坏 包裹：即产生一个BFC破坏：使父容器...
摘要：属性，会破坏文档流，与非定位元素很难结合起来用，因此也不适合自适应布局。，其对无感，无法自适应剩余浏览器空间。总结的定义，就如同结界一样，完全封闭对外无任何影响。引起的各种属性与自适应布局自适应布局与属性说明 BFC的定义 BFC的全称是block formatting context（块状格式化上下文），当BFC起作用的时候，其元素内部无论怎么翻江倒海都不会影响到外部元素，同样，外部...
摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...
摘要：前言在前面的两篇文章深入理解之浮动和深入理解之定位中，介绍了和的特性和使用方法，如果大家仔细阅读完了这两篇文章，相信你的打怪技能又提高的一大截，那么趁着自己最近状态不错，就多给大家分享点自己平时所学的技能。 1.前言 在前面的两篇文章：CSS深入理解之float浮动和CSS深入理解之absolute定位中，介绍了float和absolute的特性和使用方法，如果大家仔细阅读完了这两篇文...
摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。 《张鑫旭的CSS深入理解之absolute》学习笔记 绝对定位的特性 绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代 绝对定位的行为表现 无依赖绝对...
阅读 2026·2023-04-26 02:23
阅读 1768·2021-09-03 10:30
阅读 1250·2019-08-30 15:43
阅读 1081·2019-08-29 16:29
阅读 461·2019-08-29 12:28
阅读 2235·2019-08-26 12:13
阅读 2077·2019-08-26 12:01
阅读 2329·2019-08-26 11:56
