给你一个类似的吧，我学CSS3时候的小练习，画云的
效果图：
代码：
* {margin: 0
padding: 0
}
body {
background: #ccc
}
#cloud {
width: 330px
height: 120px
background: #f2f9fe
background: -webkit-linear-gradient(top, #f2f9f3 5%, #d6f0fd 100%)
background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)
background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)
background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)
background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%)
border-radius: 100px
position: relative
margin: 120px auto 20px
}
#cloud:after, #cloud:before {
content: ""
position: absolute
background: #f2f9fe
z-index: -1
}
#cloud:after {
width: 100px
height: 100px
top: -50px
left: 50px
border-radius: 100px
}
#cloud:before {
width: 180px
height: 180px
top: -90px
right: 50px
border-radius: 200px
}
.shadow {
width: 350px
position: absolute
bottom: -10px
background: #000
z-index: -1
box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4)
border-radius: 50%
-webkit-border-radius: 50%
} <div id="cloud"><span class='shadow'></span></div>
clear:both，并不是不允许左右有浮动元素，而是清除上面的浮动元素对自己的影响，如果它没有clear:both，那么它就会左浮动到第一排，在两个图标的后面当元素浮动的时候，它们就脱离了文档流，就好像两片云朵在空中飘着，那么它们在地面上就不占位置，地面就是这个文档流，当你在后面的元素设置clear:both的时候，就给之前的飘着的云朵赋予了地面位置，其他元素不能占那个位置了
楼主能理解么
我们在 外贸建站 教程中介绍过：如何在 WordPress托管主机 （譬如 SiteGround ）中一键开通Cloudflare CDN，以便增加 网站安全 和 提升网站访问速度 ，但是，如果你的主机不提供 一键开通Cloudflare CDN 功能怎么办呢？跟着本篇教程做，一点也不难。
本篇教程适合这类网站：你的网站所在的主机不提供免费CDN功能，譬如Cloudways主机，但你又想开通Cloudflare CDN。
步骤概要：
举几个实际案例，可能有跟你一样的情况，如果不想看就跳到下文看教程
注册Cloudflare
账户创建完成后，请添加你的网站域名到cloudflare中
添加站点
接下来我们选择免费计划并继续，免费计划就包含了DDOS共计缓解、全球内容分发网络(cdn)。
开通免费计划
然后系统会自动扫描你的站点查找已有的DNS记录，也就是解析记录，并导入到Cloudflare中，免去你重复配置的功夫。
扫描已有的DNS记录
当扫描完成后，进入如下界面，会呈现你已有的解析记录，但是由于我的演示网站是个全新的域名，所以下图中没有解析记录。如果你看到解析记录的代理状态是橙色云朵，表示开启了CDN；如果是灰色云朵，表示仅做解析用途，不会给予保护和CDN。我们点击继续按钮
在接下来的弹出窗中，由于我没有添加任何记录，系统提示我以后要添加解析记录，这样才能顺利访问网站，我们点击确认继续。
最后，Cloudflare告诉你如何修改名称服务器，也就是域名服务器（NS）。请登录到你现有的域名注册处，将已有的NS删除，新增Cloudflare提供给你的NS，通常更换NS全部生效需要24h，一旦生效，Cloudflare也会给你发送邮件通知。
我的域名是在阿里云注册的，以阿里云为例，我们来学习如何修改域名服务器。如果你在porkbun、namesilo注册的域名，可以查看这篇教程： 如何使用NS进行域名解析
首先，在域名管理页面，点击域名右侧的管理按钮
进入域名基本信息界面，找到修改DNS，点击进入
继续点击修改DNS服务器
然后填入cloudflare提供给你的两条NS记录并确认保存
保存成功后，你将看到当前DNS服务器已经成功修改了。
如果你想查看域名解析是否生效，可以通过网站 https://www.whatsmydns.net/#NS/ ，输入域名查看NS生效与否。
如果域名成功添加到cloudflare，你会收到邮件通知。
完成域名服务器修改后，回到cloudflare，点击下图所示的完成，检查名称服务器按钮继续。
接下来有个快速入门指南
第1项，提高安全性。
这是与HTTPS相关的，当你给网站安装SSL证书后，可以启用自动HTTPS重写，以避免网站里有http和https混合的情况，如果你的网站还安装SSL证书，那就不要开启了。
第2项，优化性能。
通常我们使用 WordPress建站 的话，建议安装诸如 WP Rocket 缓存插件，它们都提供了js、css、html文件缩小功能，所以可以不勾选。
第3项，摘要。这是对前面两项配置的总结，确认无误后，点击完成即可。
此时你将跳转到这几个域名的配置管理界面，请点击图中的DNS去配置解析记录。
由于我的域名是一个崭新的、未曾做任何解析记录的域名，所以，在DNS页面，没有任何解析记录。如果你的域名在原解析处有解析记录，那么将会自动同步过来。
接下来，如果我们要将域名指向网站所在的服务器，来添加一条A记录，如下图所示，我将配置loyseo.top指向到cloudways服务器
同理，如果你的邮箱是网易、腾讯或阿里企业邮箱，你也将获得邮箱解析记录，将他们添加到Cloudflare中即可。
最后，如果你的网站安装了SSL，启用了https，那么如下图所示，将SSL/TLS页面中的模式设为完全（严格）。
相关教程：
