浮动的基础

一、流的概念

文档流是相对于盒子模型讲的.文本流是相对于文字段落讲的.元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在.它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱出文本流。

二、浮动浮动的本质：用来实现并排的效果

浮动使用的要点：要浮动，并排的盒子都实现浮动父盒子要有足够的宽度，否则子盒子会掉下去.

三、浮动的顺序贴靠特性子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素

四、使用浮动的注意事项垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动“大盒子带着小盒子跑”，一个大盒子中、又是一个小天地，内部可以继续使用浮动div是免费的，不要节约盒子

五、BFC规范BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

六，如何创建BFC？float的值不是none1.position的值不是static或者relative1.display的值是inline-block、flex、inline-flex1.1.

七、清除浮动清除浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响方法一：父元素添加 overflow：hidden方法二：给后面的父盒子设置 clear：both属性--会导致margin失效方法三：使用::after伪元素给盒子添加最后一个子元素，并给 ::after设置 {content:"";clear：both;displa:block;}方法四：在两个父盒子之间隔一个携带clear：both的空盒子。