flot:浮动

盒模型

flot:浮动

float: left/right;

使用float属性将元素浮动起来,跳出当前的标准流,其相邻元素会自动绕开它.比如像下面这样.

但如果你给文字内容设置背景色,你就会发现尽管内容绕开了,但背景颜色没有绕开,通常这不是我们想要的.

你可以采用以下两种方法来解决.

1. 传统上，这个问题通常由所谓的 "clearfix 小技巧" 解决，其过程为：先向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。

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

这其实和给后面加一个空标签然后声明clear: both;的效果一样.

1. 使用 display 属性的 flow-root 值,

在其所在的父容器样式表中加入display:flow-root

文档链接

• CSS Flexbox