2021-09-26css浮动

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。（这也是通常float元素需要手动指定width的原因）

浮动规则
浮动元素会被推到他的容器的边缘。
任何浮动元素都会出现在他之前的浮动元素的旁边或是下方。如果元素都是左浮动，那么第二个元素将会出现在第一个元素的右边，如果都是右浮动，第二个元素会出现在第一个元素的左边。
左浮动的盒子不能出现在右浮动盒子的右边。
浮动元素不能高过他的容器的上边缘（当涉及到塌陷的边距这将会更复杂，请参考最初的规则）。
浮动元素不能比前一个块级元素或浮动元素高。
浮动元素不能高过前一行内联元素。
靠着另一个浮动元素的浮动元素不能超出自己的父容器边缘。
一个浮动的盒子必须尽可能的高的放置。
一个左浮动的盒子必须尽可能左的放置，一个右浮动的盒子要尽可能的右的放置。尽可能高的位置的优先级比左右高。
浮动影响
包裹性

包裹性就是父元素的宽度会收缩到和内部元素宽度一样。

浮动之所以会产生包裹性这样的效果是因为float属性会改变元素display属性最终的计算值。

设置float前的display属性——》设置浮动后的display属性计算值

inline——》block
inline-block——》block
inline-table——》table
table-row——》block
table-row-group——》block
table-column——》block
table-column-group——》block
table-caption——》b