实习小结七：html布局问题--关于float和clear

最新推荐文章于 2026-06-24 15:56:45 发布

原创最新推荐文章于 2026-06-24 15:56:45 发布 · 480 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #布局

收录于

html,css 专栏收录该内容

4 篇文章

订阅专栏

本文讨论了网页设计中的常见问题，包括ID与class的合理使用、div排版与浮动的影响、以及margin属性的应用。提出了使用class代替id、避免高度限制、正确使用clear语句、以及margin属性的灵活应用等建议，旨在优化网页布局与样式修改。

最近，财哥指出了我之前写的页面的一些问题，首先是我经常用id标注很多div块，应该是最外面的的div用id，里面的小div尽量用class，我觉得这方便在less文件中进行样式修改。

另外，我的div排版有很大的问题，给div设置高度，并且设置float，会导致不同浏览器和显示屏的显示不同，应该是使用float对多个div进行排版后，要使用clear语句来清除浮动，这样就不需要限制height了。

另外，设置了margin：0 auto后，仍然可以对margin-bottom等进行分别设置。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wn_hello

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

经验分享：CSS浮动(float,clear)通俗讲解

weixin_33714884的博客

03-27

7562

很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。写在前面的话：由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你...

参与评论您还未登录，请先登录后发表或查看评论

HTML5的重点知识小结——整体布局（浮动布局、选择标签）

PINGER007的博客

03-12

6059

3.1 浮动如果设置的是float：left；向左浮动，则元素从右边向上浮动起来到水面，然后向左浮动到水槽的左边。如果设置的是float：right；向右浮动，则元素从左边向上浮动起来到水面，然后向右浮动到水槽的右边。3.2 浮动元素对父级元素高度的影响在默认情况下，一个元素的内容大小决定这一元素的高度，当为一个元素设定了高度，那么在主流浏览器中，这个元素的高度不再由内容大小而设置的这个高度来决定...

89组合margin、padding、float、clear问题

08-04

185

有关css外边距margin和内边距padding样式,简而述之，顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-bottom:/*距离底边距*/margin-left:/*距离左边距*/；数值排列4-1，比方说margin:10px 11px 12px 13px;/*上右下左*/margin:10px 20px 30px;/*上下不一样，左右一样*/margin:10px 20px;/*上下10px 左右20px...

CSS定位——position、float小结

zhuyunhe的专栏

05-17

1691

CSS定位——position、float小结

html5学习小结，float练习。

weixin_30325487的博客

07-29

196

经过两天的H5学习之后，做了一下ｆｌｏａｔ属性的练习，要做出来的效果为：下面为代码部分，所用到的知识不多，不过才现在刚开始，以后要学的东西还有很多，大家继续加油！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>floa...

HTML 的＜b＞元素

IMPYLH的博客

06-23

317

b><b>元素是一个纯粹的表现层标签。用于视觉突出，而非语义强调。在<b>和<strong>之间犹豫时，优先考虑语义。对于复杂的样式需求，CSS 是更强大的工具。记住，好的 HTML 代码不仅看起来正确，其结构本身也应具有清晰的含义。合理使用 <b>，能让你的网页在保持美观的同时，也更加专业和规范。

Nginx-SSI：在返回静态 HTML 之前，先在服务端把 HTML 里的特定指令替换成动态内容

snow的博客

06-17

352

SSI 能实现"静态组件引入"，但没有交互、没有状态，本质是服务端的 include，不是真正的组件化。够用，但别指望它能替代任何现代框架。

Flask 笔记六：模板继承，告别每个页面复制一遍 HTML

liuyicenysabel的博客

06-23

374

下一页</a><a href="{{ url_for('home.note_edit', note_id=note.id) }}">编辑

HTML 的＜audio＞元素

IMPYLH的博客

06-23

209

虽然浏览器提供了默认控件，但很多时候我们需要自定义播放器界面以满足设计需求。

HTML 的＜base＞元素

IMPYLH的博客

06-24

305

base>是一个空元素（没有闭合标签），它必须位于 HTML 文档的 <head>部分。它的核心作用是为文档中所有的相对 URL 定义一个基准地址（base URL）和一个默认的链接打开目标（target）。简单来说，当你在页面中使用一个相对路径（如或 about.html）时，浏览器会将其与 <base>元素指定的href属性值进行组合，从而得到完整的绝对 URL。</href属性：指定基准 URL。这是 <base>元素最核心的功能。target属性：可选。为页面上所有没有显式指定。

使用 C# 将 HTML 转 Word 或者 Word 转 HTML

asdzx67的博客

06-24

通过 Spire.Doc for .NET，开发者可以用极少的代码量，在 C# 项目中实现高质量、高保真的 HTML 与 Word 互转。无论是处理动态生成的 HTML 字符串，还是批量转换现有的 HTML 文件，这个库都提供了一个稳定、高效的解决方案，能够帮助你快速构建文档自动化处理流程，将精力更多地投入到业务逻辑本身。

HTML 的＜article＞元素

IMPYLH的博客

06-22

381

article>是 HTML5 中定义的一个语义化区块元素。根据 W3C 规范，<article>元素代表文档、页面、应用或网站中一个独立、完整、可独立分发或可重复使用的内容单元。简单来说，如果一个内容块在脱离其所在的上下文后，仍然能够被独立理解、引用或分发，那么它就非常适合用 <article>来包裹。典型特征包括：独立性：内容本身是自包含的。可复用性：可以被聚合到其他网站或 RSS 阅读器中。可标识性：通常拥有自己的标题（<h1>-<h6><article>

使用HTML写一个悬浮摄像头，可拖拽、放大、缩小

weixin_52803316的博客

06-13

882

这段代码实现了一个可拖拽、可调整大小的悬浮摄像头窗口。主要功能包括：1) 通过浏览器API调用用户摄像头并显示实时画面；2) 窗口可自由拖动位置；3) 提供8个方向的调整手柄，支持窗口大小调整并设置最小尺寸限制（160×120px）；4) 采用固定定位，始终悬浮在其他页面内容之上。界面为黑色圆角矩形，带有阴影效果，光标会根据操作区域自动变化形状，提供直观的交互体验。

HTML 的＜bdi＞元素

IMPYLH的博客

06-24

332

bdi>是 HTML5 中一个专门用于双向文本隔离（Bidirectional Isolation）的语义化元素。它的全称是 “Bidirectional Isolate”。当一段文本的书写方向（从左到右 LTR 或从右到左 RTL）与周围文本的书写方向不同，且需要独立处理其方向性，避免因混合方向导致文本顺序错乱时，<bdi>元素就派上了用场。简单来说，<bdi>

HTML 的＜aside＞元素

IMPYLH的博客

06-22

350

是 HTML5 引入的一个语义化元素，用于表示与页面主要内容间接相关或辅助性的内容。其核心语义是“旁注”或“侧边栏”，通常用于承载补充信息、引用、广告、侧边导航、相关链接等。从语义层面看，的内容即使被移除，也不应影响用户对页面主要信息的理解。这使其与（主要内容）和（独立内容）形成了清晰的语义分工。元素在现代网页开发中应用广泛，以下是几个典型的使用场景：这是最常见的用法。在博客或新闻网站中，侧边栏常包含作者简介、文章目录、相关文章推荐、社交媒体链接或广告。 2.2 引文或补充说明在文章内部，可以

Fastapi + html +json 的装机报价系统 v2.6

最新发布

PieroPc的博客

06-24

电脑配件管理与装机报价工具该工具是一个基于FastAPI的Web应用，提供全面的电脑配件管理和装机报价功能，支持PC端和移动端访问。核心功能：配件管理 - 支持13类配件(CPU/主板/显卡等)的增删改查，提供卡片和列表两种视图电脑组装 - 按分类选择配件，自动计算装机费和总价报价方案 - 生成可打印/导出的报价单，支持TXT/CSV格式数据管理 - JSON导入导出、预设数据加载、一键清空仪表盘 - 显示配件总数、库存总值、均价等统计信息技术特点：前端采用单页应用(SPA)设计，响应式布

HTML 各元素在 Flutter 中的对应实现

weixin_43719312的博客

06-23

412

在 Flutter 中，没有与 HTML 元素一一对应的实现，因为 Flutter 使用的是完全不同的渲染模型（基于 Canvas 绘制而非 DOM）。但可以通过 Flutter 的 Widget 实现相似的功能。Flutter 通过 Widget 属性（如。Flutter 使用基于约束的布局（如。更新界面，而非直接操作 DOM。），而非 HTML 的流式布局。）设置样式，而非 CSS。Flutter 通过。

使用 Python 转换 HTML 为 Word 文档

2503_93068783的博客

06-23

251

在现代办公环境中，我们经常需要将网页内容或 HTML 格式的文档转换为 Word 格式，以便进行编辑、打印或归档。无论是从网站抓取的内容、电子邮件中的 HTML 格式文本，还是专门设计的 HTML 模板，能够高效地将它们转换为可编辑的 Word 文档都是一项非常实用的技能。本文将详细介绍如何使用 Spire.Doc for Python 库将 HTML 内容转换为 Word 文档，涵盖从 HTML 文件加载、HTML 字符串嵌入到转换选项配置等多个方面。

【从零构建多智能体 02】Vue3.5 基础入门：从 HTML 示例看懂响应式、列表渲染与组件通信

qq_45425616的博客

06-21

430

摘要本文是《从零构建多智能体》系列的第2篇，通过4个可独立运行的HTML示例讲解Vue3.5核心语法。采用TodoList案例逐步演示响应式数据(ref)、模板语法({{}})、事件处理(@click)、双向绑定(v-model)、列表渲染(v-for)、条件渲染(v-if)、组件通信(props/emit)和计算属性(computed)等核心概念。这些基础知识将为后续开发AI英语学习网站(Echo English AI)奠定基础。

devnullcoffee的博客

06-22

257

摘要本文系统分析了亚马逊商品页面的六大关联商品模块（Frequently Bought Together、Customers Also Bought等），详细介绍了它们的HTML容器、渲染方式和采集难度。文章提供了完整的Python代码实现，包括数据结构定义、通用解析函数以及针对不同模块（如FBT和服务端渲染模块）的专用提取方法。其中重点展示了如何通过BeautifulSoup解析静态HTML获取基础数据，并指出动态渲染内容（如轮播模块）需要Playwright等工具模拟交互才能获取完整数据。这些技术方案