CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

clear应加在需避开浮动的块级兄弟元素上，而非浮动元素自身；例如图片后紧跟的p标签或侧边栏后的main标签，加clear: both或clear: left可强制换行避让。

直接加 clear: both 在文字容器上，通常就能立刻止住重叠——但前提是它得是浮动元素的**下一个兄弟块级元素**；只调 margin 是临时糊弄，治标不治本。

clear 该加在谁身上？不是浮动元素自己

很多人试了 clear: both 没反应，是因为加错了位置：clear 对浮动元素自身完全无效（它已经浮起来了），必须加在**紧随其后、需要避开它的那个块级元素**上。

• 一张 float: left 的图片后面跟一个 <p></p>，就给这个 <p></p> 加 clear: both
• 侧边栏 float: left，主内容区是 <main></main>，那就给 <main></main> 加 clear: left（比 both 更精准）
• 父容器上加 clear 没用——它不是浮动元素的兄弟，而是祖先，浏览器根本不处理

为什么只加 margin-bottom 或 margin-right 常常失效

margin 看似简单，实则靠猜：它不解决文档流塌陷，只是“假装”留了空。一旦页面缩放、字体加载延迟、或 CMS 动态插入内容，数值立刻失准。

• 响应式断点切换时，固定 margin-right: 15px 可能突然变成 0 或溢出
• 多个浮动并排（比如两列缩略图），margin 容易相互叠加或抵消，调试时难以定位来源
• 对浮动元素设 margin-bottom 能缓解首行文字“钻底”现象，但无法阻止后续段落整体上浮

更稳的解法：用 BFC 包裹父容器

与其在每个文字块上反复加 clear，不如让父容器自己“感知”到浮动子项的存在。触发 BFC 是一劳永逸的方式：

• display: flow-root 是现代标准写法，无裁剪副作用，兼容 Chrome 64+/Firefox 59+/Safari 15.4+
• overflow: hidden 兼容性好（IE8+），但会意外裁掉下拉菜单、阴影、transform 溢出部分
• overflow: auto 比 hidden 安全，滚动条仅在必要时出现，适合不确定内容高度的场景

别在 Flex/Grid 容器里用 float

如果父容器已经是 display: flex 或 display: grid，子元素上的 float 声明会被浏览器直接忽略（CSS 规范明确要求）。你看到的“错位”，其实是该元素退回到文档流后，尺寸和对齐没重设导致的。

• 排查方法：打开开发者工具，选中那个“应该浮动却没动”的元素，在 Computed 样式里搜 float —— 如果显示 left 但 Layout 面板里 Offset 没变，基本就是父容器用了 Flex/Grid
• 此时加 clear 或 margin 都是白忙，正确做法是改用 align-self、justify-self 或 margin: auto 控制位置

真正容易被忽略的是：浮动重叠从来不是“文字跑偏了”，而是父容器高度为 0 后，整段文字的行框失去了排布基准。所以检查 Computed height 是否塌陷，比盯着 line-height 调数值要管用得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！