🌍 浮动
📖 概述
浮动本身设计的初衷是为了实现文字环绕图片的效果，或者环绕文字（大文字）。
📏 浮动元素特点
浮动元素不关注其所作用的元素到底是块、还是行内块、还是行内元素。
- 脱离常规文档流。
- 默认宽高由内容撑开，但可以设置宽高。
- 不会margin合并，也不会发生margin塌陷，能够完美设置四个方向上的margin。
影响
对兄弟元素：不会影响前面元素的正常布局，但会影响后续元素的布局（占据原有的空间，文字甩出来环绕）。
对父元素：浮动元素不能计入父元素的高度，这种现象称为父元素高度塌陷。但是父元素的宽度依然会限制浮动元素的布局，还会出现卡主的现象。
解决浮动产生的影响
- 后续元素如果是块级，可以使用inline-block使其与浮动元素公处一行。
- 父元素高度塌陷，可以手动计算高度并设置，或者可以设置父元素也浮动，或者overflow: hidden。（后两种不太推荐）
还存在一种都能解决的方案。即clear: both（也可以是left和all），它可以清除浮动影响，但不建议是inline或者浮动。
如果都是浮动元素，我们可以完美地解决父元素高度坍塌问题，具体方案为：添加一个空的伪类块级元素，并设置clear:both，content: '',display: block。