首页 > 教程 > 关键词  > CSS技巧最新资讯  > 正文

CSS技巧:子元素浮动后父容器的闭合

2009-03-05 16:08 · 稿源:中国设计秀

最近两个月断断续续做了好几个网站的美工,做的过程中对DIV+Css的标准开发有了进一步的了解。有两点收获最大,一是彻底弄懂了CSS的盒子模式(Box Model),再一个就是搞定了困扰我很久的“闭合浮动元素”的问题:

一般说来如果某个子元素使用了浮动(float),那父元素总是不能确切地知道子元素是在什么位置结束的,所以父元素的下边框总是从子元素的中间甚至是顶部穿过,看起来很不舒服。

最早时我都是在子元素结束后单独加个<br />或<div></div>将其属性设置为“clear:all;”,但这样一来就需要生成不少没用的空标签,甚至有些网站需要修改ASP代码以自动添加这些空标签,只能算是下策。

后来发现当父标签也设置为浮动(float)时就可以在正确的位置闭合了,所以就把父容易也浮动起来,这样一来很多ASP代码就不需要改了,遇到需要添加含Clear属性的空标签时如果不能从模板中添加,而需要从ASP代码中添加时,就不需要改ASP代码了,只需要把父容器设为浮动,如果还需要改ASP,那就再把父容器的父容器设为浮动,一层层地浮动上去,总能解决问题的。这虽然能省不少事,但很容易造成整个页面中全是浮动元素,-_-!!! 也只能算是中策而已。

再后来,在网上搜索别的东西时偶然发现有人说只要在父容器的CSS属性中加上以下两个属性就可以搞定了:

overflow: auto;

_height: 1%;

试了一下,果然好用,这么一来,这在目前应该算是解决这一问题的上策了:不需要对页面做任务修改,也基本上不需要对父容器--甚至是父容器的父容器做什么改动,只给父容器添加两个无所谓的属性就搞定了。

举报

  • 相关推荐
  • 国产操作系统新突破:KARE容器技术拓展应用生态边界

    KARE(麒麟应用运行时环境)是一种基于容器技术的Linux应用兼容解决方案,主要解决银河麒麟操作系统与其他Linux发行版间的应用兼容问题。其核心优势包括:1.通过资源隔离技术实现跨发行版应用稳定运行;2.相比传统虚拟机更节省系统资源;3.应用崩溃不会影响系统安全;4.卸载时能彻底清理残留文件。典型应用场景包括:旧版软件在新系统运行、特定开发环境维护、依赖复杂应用部署等。KARE将持续扩展兼容范围,完善国产操作系统生态体验。

  • Checkout.com携手Visa推出发卡业务 (Card Issuing)

    Checkout.com与Visa达成战略合作,在英国及欧洲地区推出全方位发卡业务。通过Visa全球支付网络,商户可即时获取收款资金用于支付供应商款项,显著提升资金使用效率。该合作特别针对旅游业企业,解决其支付流程分散、资金周转慢的痛点。Checkout.com每年处理数千亿交易的技术能力与Visa网络结合,帮助商户消除预存资金需求,优化现金流管理。双方表示这将大幅提升欧洲商户运营效率,释放增长潜力。

  • SSD Fans评测:忆联消费级SSD AM541|强性能 高可靠 长守护

    国内知名技术社区SSD Fans对忆联消费级SSD AM541进行了深度评测。这款PCIe4.0固态硬盘采用3D NAND闪存颗粒和最新主控芯片,1TB版本顺序读取速度达7143MB/s,写入6037MB/s,远超标称值。评测显示AM541在性能、压力测试和可靠性方面表现优异,采用无缓存DRAM-Less设计配合智能SLC缓存机制,在CDM、SNIA标准测试中均展现业界领先水平。游戏实测《FF14》加载仅7.445秒,《黑神话:悟空》启动快40%,充分满足消费级用户对高性能存储的需求,展现了忆联在存储领域的技术实力。

  • 从赛事到游戏双向适配,MOZA魔爪赛车模拟器与iRacing全面深度合作

    MOZA赛车模拟器品牌与国际汽联(FIA)、iRacing平台达成三方合作,成为FIA F4全球电竞锦标赛官方合作伙伴。该赛事将吸引全球顶尖车手争夺3.5万美元奖金池,通过iRacing平台的专业模拟系统为选手提供真实赛道体验。MOZA凭借其高精度力反馈技术和完善的硬件生态,成为首个适配iRacing 360Hz高频反馈系统的中国品牌。此次合作将推动模拟赛车与真实赛事的深度融合,为选手创造从虚拟走向职业赛道的成长路径。

  • 仙乐健康在WAIC开启AI配方引擎战略合作

    2025年7月28日,仙乐健康与记忆张量在2025世界人工智能大会签署战略合作协议。仙乐健康将基于记忆张量的MemOS操作系统构建专用工业大模型基础设施,推动健康产业从标准化制造向个性化服务转型。合作内容包括打造三大核心系统:智能知识中枢PharmaQA、配方生成引擎FormuGenius和需求洞察系统NutriTrend,并共建联合实验室推动个性化营养创新。此次合作标志着营养健康产业与AI技术的深度融合,将提升研发效率,优化全球供应链能力,巩固仙乐健康在全球营养健康食品CDMO领域的领先地位。

  • 前方突然让路不要得意要警惕!雷军:这驾驶技巧很重要

    今天下午,小米创办人雷军分享了小米精英驾驶高阶驾驶培训的安全驾驶指南。 这份指南介绍了一则驾驶技巧,在车流中行驶,前车突然让路,大概率是因为前方有需要躲避的物体或者人,小心观察前方情况,注意保持前后车距,找准机会变道脱险。雷军强调,这个驾驶技巧很重要。 据了解,小米精英驾驶高阶驾驶培训项目旨在通过系统化教学提升用户的实际驾驶操控能力�

  • 免费入场+高能福利!AGON爱攻ChinaJoy CS水友赛玩家招募通道即刻开启

    2025年ChinaJoy将于8月1-4日在上海举办,AGON爱攻将携手完美世界电竞打造精彩赛事活动。亮点包括:水友可报名与传奇战队"钢盔队"对决,还有机会与三大CS主播组队;现场将展示多款电竞显示器新品,包括CS24A定制款;参与互动问答和抽奖有机会赢取AGON大礼包。活动地点为N1-G201完美世界展区主舞台,14:00开赛。线上观众关注B站AGON官方账号参与话题互动也有福利。这是一�

  • 深化中坦经贸合作 谱写东非璀璨新篇!东非商贸物流中心(EACLC)正式启航

    2025年8月1日,东非商贸物流中心(EACLC)在坦桑尼亚达累斯萨拉姆隆重开业,标志着这一中坦重点合作项目正式投入运营。该项目总投资超1.7亿美元,建筑面积7.5万平方米,可提供2060个商铺和1000个停车位,将打造连接非洲与全球市场的战略枢纽。坦桑尼亚总统哈桑出席典礼,盛赞该项目对促进当地经济现代化、提升贸易效率的示范作用。作为"一带一路"务实合作项目,EACLC已促成中非进出口总额达9亿美元,其中山东企业贡献占比60%,极大提升了中国商品在非洲的影响力。项目计划到2026年扩展至13万平方米,目标实现年贸易额20亿美元,服务超千家中资企业,成为中国商品进入非洲的前沿窗口。

  • 十年磨一剑,智启新未来!CDA数字化人才认证教材(第4版)发布会暨融合出版战略合作圆满落幕

    2025年7月30日,北京电子工业出版社与CDA数据科学研究院联合举办《CDA数字化人才认证教材(第4版)》新书发布会暨融合出版战略合作签约仪式。该教材历经十年迭代,从基础理论框架发展为融合AI技术、行业痛点的实战型教材,累计重印25次,成为行业标杆。新版教材强化了数据采集、AI模型解释性等前沿技能,并引入金融、医疗等多行业真实案例。电子工业出版社副经理宋飙强调,教材响应国家数字化战略,致力于培养"懂行业又懂数字化"的复合型人才。双方签署战略协议,将共同探索"产教融合"新模式,打造从学习到就业的完整能力成长方案。

  • 从AI耳机到智能伙伴:WISHEE联合阿里云,在WAIC带来“云+端”的智慧进化

    2025世界人工智能大会(WAIC)上,WISHEE+AI耳机凭借全球首创多模型架构(mMA)和全场景独立智能体设计成为焦点。该产品突破单一AI能力边界,动态调度DeepSeek、Minimax、通义千问等顶尖模型协同工作:深度推理、实时检索、创意生成各司其职。通过"云+端"融合重塑服务边界,实现脱离手机的独立智能体验——内置Personal OS系统,支持语音对话、周边推荐、音乐播放等功能。13.4mm进口桑蚕丝双振膜单元提供录音棚级音质,按住耳机即可随时开启语音交互。现场还演示了即将上线的全球翻译官和会议纪要功能,展现AI如何以"交响智慧"重塑工作与沟通本质。

今日大家都在搜的词: