float浮动
浮动
浮动知识
"position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作用
浮动的初衷 是为了文字环绕效果，浮动后续元素如果是块级元素，会忽略浮动元素，占据浮动元素位置，在浮动元素下层，被浮动元素遮蔽。但是它的内部文字，和其他行内元素会围绕浮动元素，若为行内元素，行内元素会围绕浮动元素排列
margin
标准文档流中，竖直方向的margin叠加，以较大的为准
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：
浮动元素margin为负值
浮动元素margin-left为负值的时候，到达边缘了。如果上面的兄弟元素是浮动的，元素会上移。（浮动元素上移有个前提，因为margin-left为负的时候，一开始浮动元素会往边缘里面移动自身，但是上面容器还剩余的空间足够容纳浮动元素还没到边缘里面的内容。浮动元素会上移）如果上面元素不浮动。元素不上移，而且向左平移
因为剩余的空间，上面空间足够容纳了，所以浮动元素上移
浮动元素的子元素
第一，父元素不浮动，子元素不浮动，子元素内容可以填充父元素
第二，父元素浮动，子元素不浮动，子元素内容可以填充父元素
第三，父元素浮动，子元素浮动，子元素内容可以填充父元素
第一，父元素不浮动，子元素浮动，子元素内容不可以填充父元素
ie6中clear:both
问：在IE6下加了CLEAR：BOTH；之后，为什么父元素不浮动，子元素浮动，子元素内容可以填充父元素，
追答
float会遇到的疑惑
转自https://www.cnblogs.com/czy16/p/8299152.html
zoom:1的常见作用
zoom是IE专用属性，firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例，但这作用几乎用不到。
可以让网页实现IE7中的放大缩小功能。比如你想让你的网页大小变化，类似 .div1{zoom：0.5} 或者 .div1{zoom：300%} 放大3倍 或者 body{zoom：2} 整体放大2倍
设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。
通常，当浮动子元素导致父元素塌陷的时候，只要给父元素加上overflow: hidden;来解决，但是对于IE不行，需要触发其hasLayout属性才可以。
zoom:1就是IE6 专用的 触发 haslayout 属性的。hasLayout是IE特有的一个属性。很多的IE下的css bug都与其息息相关。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。
hasLayout对于内联元素也可以有效果，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果。具体关于hasLayout的知识点，可以另外搜索。
通常，在给低版本的IE做兼容的时候会用到zoom:1。例如，清除浮动的时候，我们会这么写
.clearfix::after{content: ".";clear: both;display: block;visibility: hidden;overflow: hidden;height: 0;*zoom:1}
为了防止低版本的IE浏览器不支持after选择器或者某些属性，在最后加上zoom:1来清除浮动。
为了实现inline-block的兼容的时候，我们会这么写：｛display: inline-block;*display:inline;*zoom:1;｝因为在IE6、IE7下，只有设置在默认显示方式为inline的元素上才会生效。前面说过，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果，所以这样做可以达到兼容inline-block的效果。
这里还要补充一点，为什么*display:inline;*zoom:1;前面有*，*放在css属性前面，表示这个属性仅仅应用到Internet Explorer 7 以及以下版本。因为Internet Explorer 版本 7 以及以下承认非字母数字（除了下划线）前缀的属性。所以这里，IE7以上的版本作用的是display: inline-block;而在IE7及以下的版本中作用的是display:inline;zoom:1。
浏览器兼容问题
上述知识点遇见的浏览器兼容问题
第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。
|
我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。
比如：
解决微型盒子，正确写法：
|
第二，IE6不支持用overflow:hidden;来清除浮动的
解决办法，以毒攻毒。追加一条
|
完整写法：
|
实际上，_zoom:1;能够触发浏览器hasLayout机制。这个机制，不要深究了，因为就IE6有。我们只需要让IE6好用，具体的实现机制，有兴趣的同学，自行百度。
强调一点， overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。
我们刚才学习了两个IE6的兼容问题，这两个IE6的兼容问题，都是通过多写一条hack来解决的。
这个我们称为伴生属性。
|
|
浮动的布局
浮动的砌砖头布局问题--容错性糟糕，容易出问题--需要尺寸固定，没有重用性--在低版本的IE下会有很多问题
浮动的元素脱标
证明1：
证明2：
一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。（因为脱离了标准流，不遵守标准流文档的标准了）
span{ float: left; width: 200px; height: 200px; }
浮动的元素互相贴靠
如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥，自己去贴左墙。
|
|
|
|
右浮动： float:right;
浮动框的移动
1、浮动的理解
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。（浮动元素不会覆盖前面的元素，会覆盖后面的非浮动元素）
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。（覆盖了后面的非浮动元素）
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
浮动特性
浮动的破坏性
float为什么会被设计成具有破坏性，为什么会脱离文档流？这一点非常重要！其实原因非常简单——为了要实现文字的环绕效果？
有人可能会问：啊？你刚才不是说了float的初衷就是实现文字环绕效果吗？和破坏性有啥关系？
这时我会反问你：如果float不让父元素坍塌，能实现文字环绕效果吗？给你两个图看看你就知道了。看不明白的可以给我留言讨论。
如果一个元素要浮动，那么其祖先元素一定要有高度，有高度的盒子，才能管住浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素，这样消除浮动了。
包裹性
“包裹性”也是float的一个非常重要的特性，大家用float时一定要熟知这一特性。咱们还是先从一个小例子看起：
如上图，普通的div如果没有设置宽度，它会撑满整个屏幕，在之前的盒子模式那一节也讲到过。而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容“王福朋”三个字包裹了——这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。
注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。
清空格特性
float还有一个大家可能不是很熟悉的特性——清空格。按照管理，咱还是先举例子说明。
上图中。第一个例子，正常的img中间是会有空格的，因为多个<img>标签会有换行，而浏览器识别换行为空格，这也是很正常的。第二个例子中，img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。
如果大家之前没注意，现在想想之前写过的程序，是不是有这个特性。为什么float适合用于网页排版（俗称“砌砖头”）？就是因为float排版出来的网页严丝合缝，中间连个苍蝇都飞不进去。
“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。
把内联元素变成块元素
第一，对inline元素设置float
一个很基础的问题：如何把inline元素转换成“块”元素？相信绝大部分人的回答是display:block，但是你应该知道这不是一个唯一的答案。至少我设置display:table也是可以的吧？
还有两种情况你应该去了解（如果你不知道的话）：
还是刚才那个例子，我们对span元素添加一个float:left，运行看看效果，你就会大吃一惊。从显示的效果和监控的结果上看来，span元素已经“块”化。注意，上一节刚刚讲完float，不要忘记float的“破坏性”、“包裹性”，在这里同样适用。
第二，对inline元素设置position:absolute/fixed
还是有同一个例子做演示，这次在span元素上加上absolute/fixed，效果大家应该能猜到，和加上float的效果相同。至于absolute/fixed有什么特性，会在下一节介绍position时提到。
position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float（但是能设置margin和padding，只是这时的margin或者padding的值影响的是定位流，而不会影响原来的文档流）。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流(这是自己起的名字，呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素(也就是说一旦设置了float，元素都会被设置成块级元素)。
清除浮动总结
我们提到，float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮动”） ？方法有很多种，我在这里介绍4中供大家参考，大家可根据实际情况来选择。
先介绍两个比较简单，但是不常用的解决方法：
-
为父元素添加overflow:hidden
-
浮动父元素
-
clear:both
-
clearfix
-
第四种方法也是bootstrap正在用的——clearfix
上图中，我们定义一个.clearfix类，然后对float元素的父元素应用这一样式即可
究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的空的块元素，跟第三种方法是一个道理。
清除浮动方法
适用于想把上下浮动元素隔开，不互相影响的情况
加高法：
浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度。因为麻烦，并且不能适应页面的快速变化。
<div> → 设置height
<p></p>
<p></p>
<p></p>
</div>
<div> → 设置height
<p></p>
<p></p>
<p></p>
</div>
-
最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。 浮动确实被清除了，不会互相影响了。但是存在bug就是margin失效。两个div之间，没有任何的间隙了。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div> → clear:both;
<p></p>
<p></p>
<p></p>
</div>
在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。 墙用自己的身体当做了间隙。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div class="cl h16"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，这时候推出内墙法。
<div>
<p></p>
<p></p>
<p></p>
<div class="cl h16"></div>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
overflow:hidden：
给浮动元素的父元素填上overflow：hidden，可以不影响之后的浮动元素
因为display不为none 会创建BFC BFC是隔离的独立容器，所以不影响之后浮动元素
转自https://www.jianshu.com/p/b4d2c1dfd6e5
浮动( Float )框定位细则
根元素无所谓是否浮动，没有实际意义，因此对于根元素的浮动，浏览器应该当作 "none"。
浮动框定位的宗旨是，在其左、上、右外边界不溢出包含块边界的情况下，尽量的靠上、靠左（"float:left"）或靠右（"float:right"）放置，但是不能高于它前面生成的块框、浮动框和行框的顶边，并且不能与其他浮动元素重叠。
以下规则中说到的其他元素，都和浮动元素处于相同的块格式化上下文 1中。
1. 浮动框不能在其浮动方向上溢出包含块
左浮动框的左外边界不可以出现在它包含块左边界之左。对于右浮动的元素也有类似规则。
左浮动元素的左外边界不能溢出包含块的左边界。右浮动元素不能溢出包含块的右边界。
2. 浮动框的定位受同向浮动框的影响
如果当前框是左浮动框，并且在源文档中存在更早生成的左浮动框，那么对于任意这些先前的框，要么当前框的左外边出现在先前框的右外边之右，要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。
也就是说，当前浮动框的定位会受到先前生成的同向浮动框的影响，它们不能相互遮盖。当前浮动框需要紧挨着先前同向浮动框的外边界进行定位，如果当前行空间不足，则折行，放置到它之前浮动框的下面。
3. 浮动框与不同向浮动框不可重叠
左浮动框的右外边不可以出现在它右侧的任何右浮动框的左外边之右。对于向右浮动的元素也有类似的规则。
也就是说，同一行中不同向的浮动框不能够有互相折叠的现象。
4. 浮动框外顶边界不能溢出包含块
浮动框的顶外边不能高于它包含块的顶部。另外，当一个浮动框发生在两个外边距折叠的中间时，浮动元素的定位好像它有另一个空的块级父框位于常规流中。
也就是说，当浮动框处于两个发生外边距折叠的地方时，会被当作包含在一个空的块框中，它上面和下面的外边距会穿过它发生外边距折叠，当它不存在。
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
color: white;
margin: 50px;
}
</style>
<div>A</div>
<div style="float:left; margin:10px; background-color: red;">O</div>
<div>B</div>
以上代码中，3 个 DIV 元素的包含块是初始包含块。浮动框 O 处于 A 和 B 的中间，不应当妨碍 A 和 B 的外边距折叠。
示意图：
此处在 IE 中存在兼容性问题，请自行测试。
5. 浮动框的顶边不可以高于源文档中先前元素产生的块框或浮动框的顶
示例代码：
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
color: white;
margin: 10px 0;
}
</style>
<div style="width:180px; height:auto; overflow:hidden; background:white; border:1px solid gold;">
<div style="float:left;">O</div>
<div style="float:left; background-color: blue;">A</div>
<div style="float:right; width:50px; background-color: red;">B</div>
</div>
也就是说 浮动元素不会高于上一个元素产生的块框或者浮动框顶O、A、B 都是浮动元素，O、A 是左浮动元素，根据宽度计算，A 应该处于 O 的下一行。B 是右浮动浮动元素。按照标准，B 浮动的时候，其顶边不应高于 A 的顶边，因此，B 不会放到 O 的右侧显示。
示意图：
改变代码中 A 和 B 的位置，即可让 B 显示在 O 的右侧，读者可自行测试。
6. 浮动框与行框
浮动框的顶边不可以高于源文档中先前元素产生的任何包含一个框的行框的顶。
<div style="width:400px; height:50px;border:1px solid red;">
<div style="background-color:green; float:left; width:250px;">left</div>
<span style="border:1px solid yellow;">blublublublublublublublublublublublu</span>
<div style="background-color: green; float:right;">right</div>
</div>
示意图：
按照规则，right 浮动框的顶边不能高于含有行内框的行框的顶边。
IE 在处理行框与浮动框之间位置关系时，跟其他浏览器不同5，可自行验证。
因为文字环绕效果，所以span元素没被浮动覆盖
7. 浮动框不能因同方向浮动元素而在非浮动方向上溢出包含块
左浮动框左边如果有另外一个左浮动框，它的右外边不可以出现在它包含块的右边之右。（或者比较宽松的要求是：一个左浮动不可以超出右边， 除非它已经尽可能地靠左排列。）对于向右浮动的元素也有类似的规则。此条规则也是限定浮动元素的位置范围， 不可超出包含块。与第 1，2 条有关。
8. 浮动框要放置得尽可能的高。
注意在前面关于其顶边规则的限制下，满足此条。
9. 左浮动框必须尽量靠左放置，右浮动框必须尽量靠右放置。在更高的位置和更靠左或靠右的位置间，选择前者。
和第 8 条一起，可以算是浮动的大规则，说明浮动框要尽量的向上向左或向上向右放。
10. 附加规则：'clear' 特性值不是 'none' 的浮动框
对于 'clear' 特性值不是 'none' 的浮动框，其上外边界( top margin edge )必须低于前面所有左浮动框（'clear' 特性值为 "left" 时），或者右浮动框（"clear:right"），或者左右浮动框("clear:both")的下外边界。
示例代码：
<div id="Container" style="width:300px; height:100px; border:1px solid gold; ">
<div id="DIV1" style="float:right; width:150px; height: 50px; background-color:green; ">float:right;</div>
<div id="DIV2" style="float:left; width:100px; height: 50px; background-color:red; clear:right;">clear:right float:left;</div>
</div>示意图：
这条补充规则，IE 中没有很好的贯彻6，您可以自行验证。
控制紧接浮动的排列 - 'clear' 特性
'clear' 特性是对浮动框和常规流中框的一种位置关系上的平衡。
| 值： | none | left | right | both | inherit |
| 初始值： | none |
| 适用于 | 块级元素 |
| 可否继承 | 否 |
| 计算值 | 同设定值 |
该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。'clear' 特性不考虑它自身包含的浮动子元素和不处于同一个块格式化上下文中的浮动元素。
对于插入框，该属性适用于插入框所属的最后的块框。
间隙( Clearance )以元素顶外边距上方空白的方式被引入。它用来把元素垂直（典型情况是向下）推过浮动框。它是一个值1。
'clear' 特性的值
- left | right | both：生成框的间隙，是指设置足够的(空白区)， 以使元素的顶边框边界( top border edge )放置到由源文档中较早元素生成的任何左浮动框(left)或右浮动框(right)或左右浮动框(both)的底外边(bottom outer edge， 即底外边界)之下。
- none：对考虑到浮动后的框的位置没有约束。
可以简单的认为设置了 'clear' 特性值的元素，其 top border edge 要放在相关的浮动元素的 bottom margin edge 之下。注意这两种元素接触边界的区别。一个是 border，一个是 margin。
示例代码：
<div style="width:300px; height:100px; background-color:green; float:left; border:5px solid red; margin-bottom:10px; ">
float
</div>
<div style="clear:left; width:350px; height:50px; background-color:green; border:5px solid yellow; margin-top:50px;">
clearance
</div>示意图：
这与外边距折叠无关，因为浮动元素不与其他元素发生外边距折叠
个人总结重点
有定位absolute 和fixed定位时 浮动不起作用，一个元素浮动脱标了，就能设置宽高了
如果包含框太窄，无法容纳水平排列的多个浮动元素，那么其它浮动块向下移动，直到有足够的空间，浮动元素不会覆盖前面的元素，会覆盖后面的非浮动元素
父元素不浮动，子元素浮动，子元素不可以填充父元素，其他情况可以填充，父元素padding对浮动元素起效，浮动元素不会主动去占据padding空间，父元素有设置height的话 可以管住浮动元素，不会影响到后面浮动元素
浮动元素margin为负值时，如果上面兄弟元素浮动，还有足够空间容纳的话，浮动元素上移。
浮动元素的包裹性 宽度会自动调整包裹住内容宽度，而不是撑满整个父容器，浮动元素还有清空格特性
清除浮动 适用于想把上下浮动元素隔开，不互相影响的情况
1、给父元素加高 2、给盒子clear:both，有bug，两个div之间margin会失效
3、隔墙法 内墙法 4、overflow:hidden
浮动细则
浮动框与不同向浮动框不可重叠
浮动框顶边不可高过上个元素产生的块框或浮动框顶
浮动框顶边不可以高于含有行内框的行框顶边
浮动元素要尽可能高，和尽可能靠浮动方向放置、
如果两盒盒子都浮动了，margin不会重叠
浙公网安备 33010602011771号