回归 CSS 标准之Float

如果 float 的值不是 none,那么 display 设置为inline-table会视为table,inline、table-*。。。都会视为block(所以inline产生的间距会消除)。
  • 元素具备包裹性,会根据它所包含的元素实现宽度、高度自适应;
  • 浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(默认层,产生新层来改变),但它的内部文字和其他行内元素都会环绕浮动元素;
  • 浮动元素前后的行内元素环绕浮动元素排列;
  • 浮动元素之间的水平间距不会重叠;
  • 当包含元素中只有浮动元素时,包含元素将会高度塌陷(跟第三点有重复);所以包含元素要 ::after 清除浮动。
  • 浮动元素的父元素的浮动兄弟元素,会跟随浮动元素布局,仿佛处在同一父元素中。即认同其它DOM层次的float。