CSS底部版权栏被浮动内容覆盖怎么办_在底部元素前使用clear-css教程-PHP中文网

clear: both 必须加在底部元素自身上，因为该属性只对当前元素生效，要求其上下边距区域不得有浮动元素；若加在浮动容器上则无效。

css底部版权栏被浮动内容覆盖怎么办_在底部元素前使用clear

必须把 clear: both 加在版权栏（.footer 或 .copyright）自身上，而不是它前面的容器里。 否则它根本不会下移，只会被浮动内容盖住。

为什么 `clear: both` 必须加在底部元素自己身上

clear 属性只对“当前元素”生效：它告诉浏览器“我这个盒子，上下边距区域不能有浮动元素”。如果加在浮动容器（比如 .main）上，该容器本身可能没参与正常流、或者已经脱离文档流，clear 就等于没写。

✅ 正确：.footer { clear: both; display: block; }
❌ 错误：.main { clear: both; }（.main 是浮动子元素的父容器，不是要下移的那个）
⚠️ 注意：clear: left 或 clear: right 只清单侧；若左右都有浮动（如两栏广告），必须用 both
⚠️ 若底部元素是 inline 或 inline-block，clear 无效——它只对块级盒起作用

常见失效场景：明明写了 `clear: both` 却还是被盖

不是样式没生效，而是元素没按预期参与布局流：

底部元素本身也设置了 float（比如 .footer { float: left; clear: both; }）→ 它已脱离文档流，clear 失效
底部元素用了 position: absolute 或 fixed → 不再受 clear 影响
底部元素被包裹在另一个未清除浮动的父容器里，而你只清了外层 → 实际遮挡发生在内层塌陷
CSS 优先级被更高权重规则覆盖（比如某处写了 .footer { clear: none; }）

比 `clear` 更稳的替代方案：触发 BFC

与其在每个底部位置补 clear，不如让浮动的直接父容器自己“包含”浮动子项，从源头避免塌陷：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.content-wrapper { display: flow-root; } —— 推荐，语义明确、无副作用、现代标准
.content-wrapper { overflow: hidden; } —— 简洁，但会裁剪内部溢出内容（如下拉菜单、tooltip）
.content-wrapper { overflow: auto; } —— 比 hidden 安全，但可能意外出现滚动条

这些写法都要求作用于**直接包裹浮动子元素的容器**，不是最外层 body，也不是中间某个无关父级。

伪元素 `::after` 清除法（适合复用）

如果你需要在多个地方清除浮动，又不想每次都在 HTML 里加空标签，定义一个通用类更可靠：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后在浮动容器上加 class="clearfix"。注意两点：

这个类必须加在**浮动子元素的直接父容器**上（例如 <div class="clearfix"> <div class="ad-left"></div> <div class="ad-right"></div> </div>）
不要用 ::before 做清除，旧版 IE 对它的支持不稳定；display: table 比 block 更稳妥，避免 IE6/7 的 margin 双倍问题

真正容易被忽略的，是“谁该清除”和“谁该被包含”这两个层级关系——浮动塌陷从来不是底部元素的问题，而是它上面那个容器没管好自己的孩子。