摘要：在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。
前几天有小伙伴说对float的学习云里雾里的，下面我就给大家说一下关于float的一些问题。
在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，具体转换如下表：
设定值计算值inlineblockinline-blockblockinline-tabletabletable-rowblocktable-row-groupblocktable-columnblocktable-column-groupblocktable-cellblocktable-captionblocktable-header-groupblocktable-footer-groupblock
因此，设置了float的元素，下面的写法是多余的：
.float {
float: left:
display: block;
}
.float {
float: left;
vertical-align: middle; /* 不起作用 */
}
格式化上下文属于BFC的内容，此处先不展开。
破坏文档流
这是float最本质的特性，因此float设计的初衷就是破坏文档流。设置float的元素，会导致父元素高度塌陷，我们来看个例子：
.float {
float: left;
}
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
没有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/114702.html
摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理 标签 ： 前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...
摘要：内容简述关于，确实太繁杂了，内容多。写好不易，基本上就这个调了。里面有许多属性是可以继承的，注意了，继承一定是继承父级元素的样式在这里我就列出可以继承的属性，和不能继承的属性啦不可继承的和。内联元素可继承。每个浏览器可能表现不一样。 内容简述 关于CSS，确实太繁杂了，内容多。写好不易，基本上就这个调了。大家肯定听过CSS奇淫技巧吧，关于这个我还没有去深入了解，只是说普通的效果啥的，我...
摘要：前段时间写过一篇基础知识之，当时对的理解不太准确，被慕课网多名读者指出原文已修正，如有误导实在抱歉。浮动的基础知识浮动有个属性左浮动右浮动不浮动继承。浮动元素脱离了标准文档流，文字和行级元素会环绕该元素，块级元素则不受影响。 前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的...
摘要：年月初，中共中央国务院发布了关于构建和谐劳动关系的意见，明确提出切实保障职工休息休假的权利，完善并落实国家关于职工工作时间全国年节及纪念日假期带薪年休假等规定。下一步要抓好这项工作的落实。 一直以来响应式布局都是利用的bootstrap来做，但是在手机上浏览的话，bootstrap样式文件还是有点大 118k，如果再用上一些js库的话，上个几百k是轻轻松松了，这样一来用移动流量的话真的...
阅读 3253·2021-09-23 11:55
阅读 2585·2021-09-13 10:33
阅读 1653·2019-08-30 15:54
阅读 3085·2019-08-30 15:54
阅读 2355·2019-08-30 10:59
阅读 2361·2019-08-29 17:08
阅读 1792·2019-08-29 13:16
阅读 3580·2019-08-26 12:25
