css float

特性

• 元素“浮动”
• 脱离文档流，和absolute一样，不会对其他元素的定位造成干扰
• 不会脱离文本流，不会占据其他元素的空间，但是会占据其他元素中文字的位置

---

对自身的影响

• 形成“块”（BFC），可以将行内元素（display:inline）变成块级元素
• 位置尽量靠上
• 位置尽量靠左（右）

BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。

---

对兄弟元素的影响

• 一般情况下，上面贴非float元素，除非上面元素也是float
• 旁边贴float元素，或者是边框
• 不影响其他块级元素的位置
• 影响其他块级元素内部文本

用float实现三栏布局

<div float-left><div middle><div float-right>，设置中间元素的margin-left、margin-right，空出左右栏的宽度。如果这么写，右侧元素与其他元素不对齐，会出现这个情况。 原因：

方案：<div float-left><div float-right><div middle>

---

对父级元素的影响

• 从布局上“消失”，从父级的空间里面消失了
• 父级的高度有可能会塌陷，float元素的高度不会撑起父级元素的高度

---

防止父级元素高度塌陷

• 根据BFC机制
  1. 设置父元素overflow:hidden
  2. 设置父元素为浮动元素
  3. 设置父元素position:absolute
• 设置内部最后一个兄弟元素clear:both，清除浮动对父级元素高度的影响。原理是这个空的div能让父级获取到高度，是因为设置之后这个div的左右都不能有浮动元素，所以这个空的div元素会向下移动，直到换行，而为了让这个div能够换行，父元素至少要包含浮动元素的高度才能提高足够的空间，这样实现清除浮动的影响。设置内部最后一个不参与浮动元素的伪元素clear:both display:block，同样可以达到清除浮动的效果。
• 父级div元素定义height

清除浮动参考:https://www.cnblogs.com/luoqian/p/5987788.html