摘要：浮动元素会从文档的正常流简称文档流中脱离，但仍会影响布局。五清除浮动和中对工作是这样描述的增加元素的上外边距，使之最后落在浮动元素的下面。清除区域时在元素的上外边距增加的额外间隔，不允许任何浮动元素进入这个范围内。
内容预览
包含块
浮动元素的特性
浮动元素的摆放规则
浮动元素的几种行为
清除浮动
一、包含块所有元素的布局都是依赖于包含块的。
举个例子来说
div.child的包含块就是div.parent，也就是说div.child位置的摆放是依赖于div.parent。div.parent的包含块就是body。
一句话总结：浮动元素的包含块定义为最近的块级祖先元素。
那么body的包含块html的包含块是谁呢？为了方便阅读，这个问题将在下次的文章中介绍。
二、浮动元素的特性为了便于阅读，请先了解行内元素的相关概念以及外边距合并的原理。
浮动元素会从文档的正常流(简称文档流）中脱离，但仍会影响布局。
正常流（文档流）：这是指西方语言文本从左到右，从上到下显示。简单来说就是一种自上而下自左而右到一种阅读方式
浮动元素的外边距不会合并
如果确实要浮动一个非替换元素，则必须为该元素声明一个width，否则根据CSS规范，元素宽度趋于0
举个例子：
现在对代码进行修改，给div加个浮动
三、浮动元素的摆放规则
1）浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。
这里的左（或右）是指浮动方向。
2）浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的左（右）边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
该规则主要针对多个浮动元素，并且防止它们发生覆盖。
3）左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。这条规则比较绕，个人理解就是多个子元素一起浮动时，在有限的宽度里不会发生重叠。
123总结：一般情况下，浮动元素不会发生重叠或覆盖，水平方向上也不会超出父元素边界。
4）一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
内顶端在这里的意思就是content的顶部。也就是下图箭头所指蓝色区域的顶端。
那么这条规则的第一句话意思就是浮动元素的顶端不会比父元素的content区顶端高。
第二句话不太好理解，先看段代码。
First
Float Div
Last Div
效果是这样的。
第二句话的意思个人理解为：元素浮动后外边距不再合并，而LastDiv依然处在正常流中（会与First发生合并）,所以出现FloatDiv低于LastDiv现象。
5）浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
这条规则比较好理解。注意这里的浮动元素和块级元素都是同级别的。
6）如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
一张图理解该规则
红色区域是浮动元素所在行的行框
456总结：这三条规则以递进的方式来描述浮动元素在垂直向上方向的位置摆放问题。分别介绍浮动元素与包含块的位置关系，浮动元素与同级元素的位置关系以及浮动元素与其所在行框的位置关系。
四、浮动元素的几种行为 1. 高度过高高度超出包含块的高度时会发生什么？常说的高度塌陷就是这里产生的。
在前面的规则中并没有对该情况进行处理。
CSS2.1 中对此行为进行了说明，浮动元素会延伸，从而包含其所有后代浮动元素。所以通过将父元素设为浮动元素，就可以把浮动元素包含在其父元素内。
The content after float element.The content after float element.The content after float element.The content after float element.The content after float element.The content after float element.
2. 负外边距
浮动元素的规则对浮动元素在水平以及垂直朝上方向的位置摆放进行了严格限制。然而，当margin设为负值时，确实超出了包含块的边界。
稍加修改样式
.child{width:100px;height:300px;background:red;float:left;margin:-50px 0 0 -50px;}
body{padding:50px;}
3. 浮动元素过宽
浮动元素过宽时，此时会哪边会超出包含块边界，则是由浮动方向决定了。因为规则1里说的浮动元素的左（或右）边界（浮动方向）不会超过包含块的左（或右）边界。
a.向左浮动时
b.向右浮动时
4.浮动元素与其他元素的重叠a）行内元素
行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示。
b）块级元素
块框与一个浮动元素重叠时，其边框和背景都在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。
This is inline element
This is block element
一图胜千言。
五、清除浮动CSS1和CSS2中对clear工作是这样描述的：增加元素的上外边距，使之最后落在浮动元素的下面。这也就是说清除元素的上外边距可能会调整。
CSS2.1中，引进了一个清除区域（clearance）。清除区域时在元素的上外边距增加的额外间隔，不允许任何浮动元素进入这个范围内。这意味着在给元素设置clear时，它的外边距并不改变。之所以发生下移是这个清除区域造成的。
这是未设置clear属性时的效果。
给sec设置clear属性时，是这样的。红色区域是清除区域。
div.sec{background-color:#3fa;width:300px;clear:left;}
关于清除区域大小：个人理解这个区域的大小是不固定的，这个大小是由清除元素前面所要清除的浮动元素的大小来决定的。并且浮动元素和清除元素的方向是要保持一致的。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115027.html
摘要：它是用于决定盒子的布局及浮动相互影响范围的一个区域。小白反思如果世界的运行都有自我运行的一套机制，那么的世界必然有自己的一套规则。外边距合并当时在回答外边距的问题时，总结出了合并的一条规则必须相邻。 最初的梦 了解BFC后，能够更深入的明白外边距合并原理。了解BFC后，能够更深入的明白浮动的行为。了解BFC后，知识就是你的，总不会吃亏对吧？哈哈 之前有两篇文章《行内元素的一些探索》、《...
摘要：关于内联元素之前讨论的多是块级元素，而没有考虑到内联元素的情况。但巧合的是，在普通流定位中，内联元素宽度和高度规则却和块级元素绝对定位差不多，都只受内容大小影响。 我们知道，元素在没有设置宽高的情况下，默认的宽高值都为auto。而这个auto到底是如何让元素自动拥有宽高的呢，也就是说，元素的宽度和高度到底会受到什么因素的影响？本文将通过一个例子来对这一问题一探究竟，HTML结构和初始c...
摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。 题目 最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示 解题 step1 常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动...
摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。 题目 最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示 解题 step1 常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动...
摘要：盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子所以布局的万物基于盒子。虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。 盒子模型 我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子...
阅读 3877·2021-10-08 10:04
阅读 2909·2021-08-11 11:20
阅读 2510·2021-07-25 21:37
阅读 2518·2019-08-30 12:44
阅读 2171·2019-08-30 11:12
阅读 1191·2019-08-26 13:45
阅读 2208·2019-08-26 11:53
阅读 2948·2019-08-26 11:32
