模板:clear-float
描述
这个模板用于插入一个清除浮动的 DIV。将它放在浮动体之后,避免其浮动影响到后续元素。
详细请见示例。
语法
[|clear-float|]
这个模板没有参数。
示例
用于多个浮动元素 / 具有浮动元素的元素之间的换行
该模板最常用的地方是:在 infobox 中的某一个单元格中使用 template:icon 内的模板插入 多个描述图标,这些描述图标一行一个。
如果直接如下书写:
[|infobox |title=某某某 |img=[|avatar|ac人物:acfun虚拟偶像:ac娘本体:msac_avatar_2022_11.jpg|] |info= ^ AcFun ^^ ^ ID ~~!~~ 某某某 ~~!~~ ^ 认证 ~~!~~ [|icon:acmonkey|][|icon:acavi|233|] ~~!~~ |]
得到的结果是:
这是由于每个 icon 模板内图标的容器 .wrap_template_icon-icon-body
是左浮动的。
所以 AVI 图标会企图与猴子图标横向并排。但又因为「AcFun管理员」的存在,迫使整个 AVI
icon 模板向下移动,故造成了这种情况。
解决方法是在两个 icon 模板之间插入一个本模板。即如下:
[|infobox |title=某某某 |img=[|avatar|ac人物:acfun虚拟偶像:ac娘本体:msac_avatar_2022_11.jpg|] |info= ^ AcFun ^^ ^ ID ~~!~~ 某某某 ~~!~~ ^ 认证 ~~!~~ [|icon:acmonkey|][|clear-float|][|icon:acavi|233|] ~~!~~ |]
就会得到正确的结果:
用于不让文字与浮动元素显示在一行上
在一些特殊的地方,您不想让浮动元素发挥它的「浮动」作用——您想先显示浮动元素,后显 示文本,不准它们混在一起;或是禁止某个地方之后的内容与某个浮动体掺和在一起。在这时候,你可以 使用本模板。
本文就是一个例子。你可以查看本文的源代码。
歌者狗耳的页面 也是一个很好的例子。