float

--- float浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

\1. 标准流中的块级盒子，宽度将会自动伸展为100%，而浮动的块级盒子，宽度不会自动伸展，而是由内容冲开（宽度取决于内容的多少）；
2.当一个盒子浮动，标准流中未浮动的其他盒子，将视浮动盒子不存在而占据浮动盒子原来的位置（浮动盒子，会盖在这个盒子上方）。但是，未浮动盒子中的内容，将会受到浮动盒子的宽度的影响（为浮动盒子中的内容，不会被浮动盒子盖住）。
3.由于第二条的原因。我们可以给受浮动影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响。clear可选值：left-清除左浮动影响，right-清除右浮动影响，both-同时清除左右浮动造成的影响.父盒子没有指定高度，如果子盒子没有设置浮动，则父盒子的高度可以被子盒子撑开。
面试题可能遇到：
如果，父盒子中所有的子盒子都设置浮动，那么父盒子的高度将变为0。父容器塌陷问题

解决：1、父容器设置overflow：hidden；2、父容器::after{display:block;content:"";clear:both;visibility:hidden};3、父容器内部最后添加一个高度为0的div,clear:both

⚠️补充：文字围绕问题

带有浮动属性的元素会脱离标准流进行排列布局，脱离标准流后的元素就不和块元素相处在同一个流不居中，使得带有浮动属性的元素漂浮在正常块元素上面。但是 浮动的块虽然脱离了正常的文档流，但是依然占据正常文档流的文本空间。于是在其后面写的文本并不会被浮动元素所覆盖而是继续水平排列超出换行。

标准流中块元素每个各占一行。内联元素则是水平排列，直到一行排列不下进行换行操作。因为使用了float的元素占据文本空间，使得后面的文本以除了浮动元素之外的空间为排列基准，形成了文本环绕的效果。

PS：❗️汉字会默认换行，但一串英文会被识别为一个单词，默认不换行，一列到头

--- 清除浮动：父容器塌陷问题

由于子元素全部浮动，导致父容器高度为零，造成容器塌陷问题。

• 给父部盒子一个高度，缺点不能自适应高度
• 给父盒子内部最后面添加一个子div，设置clear：both，缺点：多添加了一个元素
• 父盒子设置：overflow：hidden，原因：使元素具有BFC而不会受子元素的影响
• 父盒子添加一个虚拟子元素： :after {display: block; content: ' '; clear: both;}，这三个元素缺一不可！！！