如何让CSS浮动元素自动换行_float布局多行处理技巧

直接结论：浮动换行取决于清除。

容器具有固定宽度，子元素具有固定或百分比宽度。
子元素的宽度为3 0%，右边距为5 %，三个子元素的右边距被删除。
父容器的宽度为1 00%或8 00像素，并去除边距。
box-sizing设置border-box，边距不宜太大。
要消除溢出，请使用clearfix::after 或overflow:hidden。
Flexbox是现代使用的，display:flex；弯曲包裹：包裹；。
或者Grid，显示：grid；网格模板列：重复（自动调整，minmax（2 00px，1 fr））；。

Flexbox 和 Grid 比旧方法更好。

以下的CSS代码中AFTER怎么理解？

在伪元素上加一个点并clear: 都可以清除浮动部分。
该句点被隐藏并占用空间。
IE6 使用 Zoom:1 代替。
类名Clearfix比较方便。
无需添加空 div。
你自己看看吧。

css清除浮动的几种常用方法

1 .清除clear float（添加空div方法） 在浮动元素下方添加一个空 div 并编写一些 CSS。
{清除：两者；高度：0；溢出：隐藏；}
2 如何：设置父级的高度。
向父级添加高度可以解决塌陷问题。
缺点：子高度不固定。

上周我处理了一个案例，客户就是这样的情况。

3 方法：浮点 父级也浮动。
缺点：浮动容易出现问题。

一般不建议这样做。

4 方法：父内联块 父级内联块也可以工作。
缺点：自动保证金无效。

我很少用这个方法。

5 br 清除浮动 使用。
问题：分离结构风格行为。

这显然是不正常的。

6 溢出：隐藏 将溢出：隐藏添加到父项。
问题：宽度或缩放必须兼容 IE6 /7 写法：溢出：隐藏；缩放：1 ；
现在我们处于IE6 /7 时代。

7 通用方法：在伪类之后 推荐主流方法。
如何写： .之后{ 内容：“.”； 明确：两者； 显示：块； 高度：0； 溢出：隐藏； 可见性：隐藏； }
Zoom需要兼容IE6 /7 缩放：1 ；
目前正在使用此方法。

你自己检查一下。