如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
移动端文字环绕图片不能直接用 float，因其在小屏下易致文字被挤成极窄列、单字换行、断词错乱或内容溢出；现代移动端应默认避免图文环绕，需用媒体查询重置 float 为 block 并配合 grid/flex 实现响应式分离。
移动端文字环绕图片为什么不能直接用 float
因为 float 在小屏幕下极易导致文字被“挤”到极窄列中，出现单字换行、断词错乱、甚至内容溢出容器——这不是 bug，是浮动在 viewport 变小时的自然行为。现代移动端排版默认应避免图文环绕，除非明确需要报纸式混排（极少）。float 本身不响应视口变化，也不会自动退化为块级堆叠，必须主动干预。
用 @media 覆盖 float 并重设布局流
最稳妥的做法不是“清除浮动”，而是让图片在移动端彻底退出浮动上下文，回归标准文档流：
- 给图片加一个 class，比如
.float-img，初始样式设float: left+margin-right - 在
@media (max-width: 768px)内，重置为：float: none; display: block; margin: 0 auto; width: 100%; max-width: 400px; - 同时确保父容器没有意外触发 BFC（如
overflow: hidden），否则可能截断图片阴影或弹窗 - 如果文字是
<p></p>，它会自动在图片下方展开；若需图文分离更干净，可额外加margin-top: 1rem隔开
为什么不用 clear 或 clearfix 解决这个问题
clear 只控制元素自身是否避开前面的浮动，不改变浮动源的行为；clearfix 是为解决父容器高度塌陷而生，在移动端你真正要的是“取消环绕”，不是“撑高容器”。继续保留 float 属性再加 clear，等于一边浮一边拦，逻辑冗余且易在 flex/grid 父容器中失效。更关键的是：iOS Safari 对 ::after 伪元素触发的 clear 在缩放或横屏切换时偶有渲染延迟。
替代方案：改用 display: grid 或 flex 实现响应式图文分离
如果项目已支持 Grid（Chrome 57+/Safari 10.1+/Firefox 52+），直接放弃 float 更省心：
- 用
grid-template-areas明确划分区域："img" "text"（竖排）、"img text"（横排） - 配合
@media切换grid-template-areas值，无需 JS，无浮动副作用 - 图片用
align-self: start控制垂直对齐，文字容器用overflow-wrap: break-word防止单词溢出 - 注意：不要在 grid 容器上再设
float，二者不兼容，浏览器会静默忽略float
真正容易被忽略的是：很多团队只在 PC 端测试浮动效果，却没验证横屏 iPad 或折叠屏设备下 max-width 断点是否覆盖了 834px/1194px 这类新尺寸。浮动一旦残留，就可能在某些 viewport 下重新激活环绕——这不是 CSS 失效，是媒体查询没跟上硬件演进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
