float 是 CSS 中用于定义元素在其包含块中浮动的属性。浮动使元素可以沿其包含块的左侧或右侧移动,直到它遇到包含块或另一个浮动元素为止。

具体的使用方式如下:
/* 语法 */
float: left | right | none | inherit;

/* 示例 */
.float-left {
  float: left; /* 元素浮动到左侧 */
}

.float-right {
  float: right; /* 元素浮动到右侧 */
}

.no-float {
  float: none; /* 默认值,元素不浮动 */
}

  •  left: 元素向左浮动。

  •  right: 元素向右浮动。

  •  none: 默认值,元素不浮动。

  •  inherit: 继承父元素的浮动值。


浮动元素会从正常的文档流中脱离,使得其后的块级元素会向上偏移,环绕在浮动元素的周围。浮动的元素不再占据文档流中的空间,因此可能导致容器高度塌陷。

浮动元素的常见应用包括创建多列布局、图文混排等。然而,由于浮动的一些特性(例如,可能引起的容器高度塌陷和需要清除浮动),在现代布局中更常使用 Flexbox 和 Grid 等新的布局模型。


转载请注明出处:http://www.pingtaimeng.com/article/detail/6072/CSS