7Blogger网页架构设计之Float-- 后面元素的处理（三）

上一篇文章 谈到，浮动元素的上方元素不会受到影响，但是，他下边的元素是会受到影响的，所以，有时会造成我们不想看到的结果，本文我们就来谈谈该怎样处理。

本文索引

• 浮动元素对后面元素的影响
• clear: left
• clear: right
• clear: both

None

浮动元素对后面元素的影响

用了浮动元素后，其后面的元素将环绕浮动元素，很多时候我们都不希望发生这种情况，那我们就可以将“clear”属性应用于后面的元素。四个选项是“clear: left”，“clear: right”，“clear: both”或 “clear: none”。

None

None

clear: left

用上这个属性之后，后面的元素将移动到源文档中较早的元素产生的任何左浮动框的底部外边缘下方。

None
None

clear: right

用上这个属性之后，后面的元素将移动到源文档中较早的元素产生的任何右浮动框的底部外边缘下方。

None

clear: both

None

用上这个属性之后，后面的元素将移动到源文档中较早的元素产生的所有浮动框的底部外边缘下方​。

🟢 读者资源专享

这里是我从网络上收集并整理的一些免费节点资源。 如果你需要，可以通过下面的链接下载或订阅使用。

📥 V2ray / Karing / Shadowrocket

下载节点文件 预览节点

📥 Clash Verge

下载节点文件 预览节点

📥 For Shadowrocket

下载节点文件 预览节点