**通俗地讲，浮动是走后门的人（真身在新的流中(
与普通元素流~~同层~~不同层)，有体积有排序）浮动就是 只将被设置浮动的目标元素提取出来（必然不包括好几个浮动元素间的换行符，空格符，而只是元素本身,这就是与inlineblock区别），然后将它们在以父元素/前面的同级元素为基准（和普通元素着基准方式相同），在同一个新建的流中按流排序。(
与inline-block所在流相同，但浏览器渲染会尽量让他挤在前面“在同一个流”是因为加了 overflow:hidden (svg自带overflow:hidden）。
注释：如果 "position" 属性的值为 "static"，那么设置 "bottom" 属性不会产生任何效果。
//黑色的
//浮动的，蓝色的
//浮动的，蓝色的
//浮动的，蓝色的 默认父元素占位不安浮动的自元素来，但清除浮动，就是将浮动元素计算在内。普通自元素 和 浮动元素 取较大值为父元素大小。
总结特点： 找到基准，抽出元素，margin移动，不受行限。
与inlineblock区别:
很显然，由于属性display:inline-block而在一行的块级元素中间会出现间隙，而浮动则不会。
inline-block实现：
明显有那个空格在。（还是用浮动吧）或者如果你不嫌丑，这样也行：
以上 写在一起，/n就不会产生影响了。
margin
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
float 没有行的概念，e.g margin-left: -999px,够了就能上去；inlineblock,block 有行的概念，挤下来就上不去了，只能在本行移动。
案例
可以更改margin-left，来回移动
浮动影响
分析HTML代码结构：
分析CSS代码样式：
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}
这里我没有给最外层的DIV.outer 设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：
（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示
overflow
.clearfix {
overflow: auto;
}
clear：both；
添加多一个div：
It is on the left
It is on the right
添加对应的css：
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
:after 方法
方法三： 据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲）
先说原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：
.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/
.outer:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
.outer :after
content: '.'
有此项，after元素才会存在
clear:both;
指清除所有浮动；
display:block;
为了使“height: 0”生效，否则after会占据空间。默认内联元素（高度、宽度、行高及顶部和底部边距不可设置）。
对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。
**visibility:hidden;
允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。**
section 并不是浮动，after是在`父元素上的。不是在最后一个浮动的子元素上。
<nav class="elem elem-red">
<section class="elem elem-green">
:after
案例
没有清除浮动前，只能全靠自己。清除后，子元素可以撑开父元素。
test
test
test
test
test
overflow,clear:both区别
使用overflow会产生如下问题(margin：负数)，而clear：both不会.
如果非要用overflow：hidden呢？
* {
box-sizing: border-box;
}
overflow
归根结底，overflow只保全width，height部分以及padding部分正常显示.所以border出不出问题就看加没加 { box-sizing: border-box;}了.
overflow无法解决的缺陷
当使用absolute特性，hover触发，元素显现；如果内部float元素，父元素用了overflow：hidden，那就没的显示了.(ul下，:after,默认height：20px，所以需要单独设置height：0px;)
未清楚浮动：
使用overflow清除：
上图，剩下的都被遮住了.
浮动文档流特性
默认
默认浮动元素不覆盖 浮动/普通流元素.
浮动元素 行行间限制
如果static元素(普通流)不存在，aside {margin： -x} (x > aside.width)，aside元素可以跟上去，并覆盖column一部分.
margin-left: -100px;
margin-left：-200px; (x > aside.width)
所以，浮动元素统一在一个新的流中，通过margin属性设定要求，可以在流中穿梭，并无视其他浮动元素.(x < aside.width，在同行；x > aside.width向上行；第一个浮动元素没得行可以上(此例子是content元素)，所以仍在该行)
普通元素 行行间限制
普通元素B，会被前面block元素A限制在A后面的行；(A若是inline-block，且无上图‘空白’元素即紧挨着)B还可以溜上去(通过margin-left负值).
上图，side 是inline-block；content是block
多说一句，上述两图果然是有基线问题差异.
总结：
空白元素会阻塞行穿梭；block与inline-block + width: 100%有不同之处，block会阻塞行穿梭.=> 坑太多，还是建议用浮动搞自适应.
浮动元素、普通元素 同行内部
static元素存在，会将后续的浮动元素限制在自己所处的行之后，此后，aside只能活动在static元素行，无法再上content行.`这也是为何：after {clear：both}能清除浮动的原因.
margin-left：-200px; (x > aside.width)
aside在static行的不可见部分，不再向上行.
margin-right: 0px;
浮动元素清算自身后放置.
margin-right: -100px;
margin负数时与普通元素相同，后覆盖前.( 下例均为inline-block)
流与浮动流片段
以下普通元素，浮动元素均为同级元素，流是父元素包裹中的流：
前：普通元素与浮动元素所处流相同
流：普通元素截断 浮动元素的流片段(前置普通元素同层的缝隙)(以行单位截断)(:after{clear：both})
放：浮动元素放置前先清算自身，看能否在该行放下.(绝不会覆盖普通元素)(先清后插)
位：浮动元素在**自己**的流片段上蹿下跳(margin负数时与普通元素相同，后覆盖前浮动元素)
注意：
特：普通元素在**整个**流中上蹿下跳(margin负数，覆盖前浮动/普通元素)
margin-left: -500px;(覆盖了content浮动元素)
margin-left：-800px；(到父元素的头了)
float的元素脱离了文档流，但是没有脱离文本流,字体是认同浮动元素所占据的区域的。
文字跟在浮动元素的后面是有理由的——那是优先级问题，文本优先级最高，必须保证文本显示出来(同级普通元素也是这个道理，优先渲染显示)
说了这么多，我觉得这样理解简洁：浮动元素脱离了文档流，当依据优先级放置(同级行元素，普通的先放，浮动后放，且浮动元素识别普通元素站位)，外界行元素(未清除浮动)不识别浮动元素站位(`浮动元素还是会识别上行的浮动元素，所以置身于浮动元素下方.
总结
普通元素指BFC元素
按元素渲染顺序讲(同级元素：普通，浮动)：
普通元素在流中驰骋覆盖(不管前面的同级元素受block占行元素影响)，浮动元素在流片段中驰骋覆盖(先确定流片段 => 导致不会覆盖前面的普通元素)
原文链接：https://www.f2er.com/note/421463.html
