前端学习笔记之浮动

1.浮动的规则

1）元素一旦浮动后，

脱离标准流；

朝着向左或者向右移动，直到自己的边界紧贴着包含块（一般为父元素）或者其他浮动元素的边界为止。

元素层叠关系：

标准元素---》浮动元素---》定位元素

2） 所有行内级元素内容不会与浮动元素层叠，行内级内容将会被浮动元素推出；但是块级元素不会被推出，会产生重叠现象

利用此特性可以实现文字环绕图片效果

3）行内级元素、。。。。浮动后顶部与所在行的顶部对齐，不会跑去最上边

 浮动现象解释：

 二.inner1浮动，inner2不浮动，（粉色inner1，绿色inner2，红色父div）

 三。inner1浮动，inner2不浮动，inner2有文本

四。 inner1和inner2都浮动

五。inner1和inner2都浮动，且父元素没有设置高度（高度塌陷）

解决高度塌陷的办法：overflow:hidden;

 补充知识：对于position:absolute/fixed的脱离文档流跟float的脱离文档流：

 4) 浮动边界不会超过包含块的边界

 5）浮动元素之间不能层叠

 6）浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端（不区分左浮动、右浮动）

 利用inline-block布局的缺陷：

一个有文字，一个没有文字，那么两个div的对齐方式会按照文字的基线进行对齐。并且两个div之间也会有空格（空格大小随着字体大小改变而改变）。

 2.浮动的应用场景：

布局中常遇到的问题：最后一个元素的margin-right一般都是多余的，这也会导致最外层爷爷div大小不够，让想要排列的元素被挤下去。

解决办法：最简单、常用的，对元素的上一层父div设置负margin