HTML

CSS

DEMO

可在 CodePen 上查看真实效果和编辑代码

说明

浏览器支持情况

99.9% 查看本条 caniuse

无需借助辅助元素进行浮动的清除。

注意：这仅在使用float布局时才有用。实际场景中请考虑使用Flexbox布局或者网格布局。

HTML

CSS

DEMO

可在 CodePen 上查看真实效果和编辑代码

浏览器支持情况

100%

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

给定宽度可变的元素，它将确保其高度以响应方式保持成比例（即，其宽高比保持不变）。

DEMO

可在 CodePen 上查看真实效果和编辑代码

HTML

CSS

说明

浏览器支持情况

100%

使用display：table（作为flexbox的替代）使子元素在其父元素中水平垂直居。

HTML

CSS

DEMO

可在 CodePen 上查看真实效果和编辑代码