前言

浮动布局（Float布局）是一种CSS布局技术，用于在网页中创建多列布局、图文混排等结构。通过将元素浮动到其容器的左侧或右侧，可以使其他元素环绕在其周围。

浮动语法

float: none不浮动，left左浮动，right右浮动。

浮动布局特点：测试地址

1、当元素使用float:left左浮动或float:right时，元素会以顶部对齐，且紧挨着没有缝隙。

无浮动

设置浮动后

2、当元素使用float:left左浮动或float:right时，不管元素是inline、inline-block还是其它，都会变成block。

3、当多个元素使用float:right时，元素顺序会翻转。

4、当元素使用float:left左浮动或float:right时，元素会脱离正常文档流，父元素高度塌陷。

使用float:right时

5、当元素使用float:left左浮动或float:right时，元素使用margin: 0 auto;无效。

浮动的影响和解决办法

容器高度塌陷：浮动元素脱离了文档流，可能导致包含它们的容器高度塌陷。这是因为浮动元素对容器的高度计算没有影响，容器无法正确地包裹浮动元素。

(推荐)在容器末尾添加一个空的块级元素，并为其应用clear: both;样式，以清除浮动。

.warp::after {
  display: block;
  content: "";
  clear: both;
}

给容器设置 overflow: hidden; 或 height

.warp {
  width: 300px;
  height: 400px;
  border: 2px solid #ff0000;
  overflow: hidden;
}