具体的使用方式如下:
/* 语法 */
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