微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

CSS布局overflow hidden的说明 没搞懂。_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:12:06
原创
1543人浏览过

代码如下。
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档





        
new_list




    
运行代码后在IE7和IE6下的显示示例。

在IE8.0下的显示实例


我想问的就是。
在#con_t{ width:960px; height:auto; background:#CCC scroll 0 0; margin:0 auto; padding-bottom:20px;}
加入 overflow:hidden;以后ie7和IE8都显示一样的结果了。那明明overflow:hidden;是隐藏超出部分。为什么还有这个功能？》
http://www.viuoo.com/a/DIV/2012_0602_114.html  这个是原始地址。大家帮忙理解下。

奇布塔
奇布塔

基于AI生成技术的一站式有声绘本创作平台

奇布塔 41
查看详情 奇布塔

回复讨论(解决方案)

楼主 这是清除浮动的简便方法， 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#con_t{ width:960px; height:auto; background:#CCC scroll 0 0; margin:0 auto; padding-bottom:20px;}#con_t .new_list{ width:250px; height:220px; border:1px #3F0 solid; float:left;}</style></head><body><div id="con_t"><div class="new_list">new_list</div><div style="clear:both;"></div></div></body></html>
登录后复制


具体可参见
http://www.zhangxinxu.com/wordpress/2010/01/%e5%af%b9overflow%e4%b8%8ezoom%e6%b8%85%e9%99%a4%e6%b5%ae%e5%8a%a8%e7%9a%84%e4%b8%80%e4%ba%9b%e8%ae%a4%e8%af%86/

更多方法可参考
http://www.qianduan.net/universal-to-remove-floating-style.html

楼主 这是清除浮动的简便方法，
HTML code

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


学习了，很有用


new_list



大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：虽然在网上下载了一些焦点图的代码来研究，但还是不太懂，能请教下高手有什么有什么公式的吗？_html/css_WEB-ITnose 下一篇：HTML5画布问题_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
如何使用在线HTML编辑器实现网页布局优化的详细教程 选择合适在线HTML编辑器如CodePen、JSFiddle或StackBlitz，利用其实时预览和响应式测试功能，通过语义化标签优化HTML结构，应用Flexbox与Grid布局结合媒体查询实现响应式设计，并精简代码、提升可访问性，最终借助内置工具或PageSpeedInsights完成性能检测，确保页面高效稳定。
2025-11-09 20:55:34
868
html滚动条渐变色怎么实现_html滚动条渐变色效果设置教程 使用CSS的::-webkit-scrollbar伪元素结合linear-gradient可实现滚动条渐变色效果，首先定义滚动条各部分结构，再为::-webkit-scrollbar-thumb设置渐变背景，如从橙色到红色的垂直渐变，并可通过添加边框、阴影及hover状态提升视觉交互；需注意该方法主要适用于Chrome、Edge等Webkit内核浏览器，Firefox和Safari兼容性有限，建议配合JavaScript库或降级样式以增强跨浏览器支持。
2025-11-09 20:51:03
324
如何在Emacs中配置HTML多窗口编辑的详细步骤 配置Emacs实现HTML多窗口编辑：通过C-x3和C-x2进行垂直与水平分屏，C-xo切换窗口，C-x1关闭其他窗口；2.打开HTML及相关文件：主窗口编辑HTML，另一窗口打开CSS/JS文件协同编辑；3.启用web-mode提升语法高亮与补全，在init.el中添加配置并关联.html文件；4.可选实时预览：保存后调用外部浏览器命令或结合脚本自动刷新，实现高效开发。
2025-11-09 20:38:02
420
如何使用HTML构建移动端适配页面的详细步骤 答案：构建移动端适配页面需设置viewport、使用流式布局、添加媒体查询、优化触控体验。具体为：1.添加width=device-width和initial-scale=1.0的meta标签；2.用百分比或flex布局，设max-width和响应式图片；3.按屏幕断点写媒体查询调整样式；4.确保点击区域≥44px、字体≥16px，合理使用input类型。
2025-11-09 20:33:03
380
html如何改域名_HTML网站域名（DNS解析）修改绑定方法 更换网站域名需配置DNS解析和服务器设置，首先在域名平台添加A记录指向服务器IP，并在服务器中绑定新域名，最后更新网站内部链接为新域名或相对路径。
2025-11-09 20:24:03
903
如何编辑网页HTML中的弹性盒子_如何编辑网页HTML中Flexbox弹性布局 Flexbox通过设置display:flex实现响应式布局。先将父容器设为弹性布局，再用flex-direction调整排列方向，justify-content和align-items控制主轴与交叉轴对齐，flex属性定义子元素伸缩行为，order属性改变显示顺序，从而实现多屏幕适配的灵活布局。
2025-11-09 20:01:12
450
HTML5在线如何构建图片编辑器 HTML5在线图像工具的完整教程 首先搭建HTML结构，包含文件上传、画布和操作按钮；接着通过FileAPI读取图片并绘制到Canvas上，保持宽高比缩放；然后利用Canvas的像素操作实现灰度化等滤镜效果，通过遍历ImageData修改像素值；最后添加下载功能，使用toDataURL将画布内容转为Base64链接并触发下载。基于这些步骤可构建一个轻量级在线图片编辑器，支持本地处理无需后端参与。
2025-11-09 19:58:02
484
html按钮链接怎么打_html按钮链接如何打详细方法 答案：HTML中按钮添加链接常用四种方法：1.onclick事件跳转，兼容性好；2.button嵌套在a标签内，需设type="button"；3.form提交实现GET跳转，适合带参场景；4.样式化a标签模拟按钮，语义清晰且无需JS。
2025-11-09 19:49:11
462
如何通过Geany设置HTML验证插件的详细教程 Geany可通过插件和外部工具实现HTML验证。首先启用“ExternalTools”插件，再安装HTMLTidy或vnu.jar验证器。配置外部工具命令：Tidy使用tidy-eq-errors-quiet"$(basename%f)"，vnu.jar使用java-jar/opt/vnu/vnu.jar"%f"。保存文件后运行命令，结果在消息窗口显示，支持快捷键触发，双击错误跳转行号，实现高效语法检查。
2025-11-09 19:37:02
714
HTML5代码如何设计响应式表格 HTML5代码溢出处理的方案 响应式表格溢出可通过四种方案解决：1.用带滚动的容器限制宽度，允许横向滑动；2.用媒体查询在小屏隐藏非关键列；3.用sticky固定表头并滚动内容；4.超小屏转卡片布局，每行变卡片提升可读性。
2025-11-09 19:29:02
385
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部