父元素如何围住浮动子元素

简介: 父元素如何围住浮动子元素

 父元素如何围住浮动子元素


细节:父类是浮动的话根据继承关系,则父类里边的子类跟着父类一起浮动;但是子类都是浮动的话,

父类不设置浮动的则子类会脱离父类容器;解决:在父类容器中设置位置的子类为非浮动子类。(把浮动想象成泡沫体)

 

bug出现:父元素如何围住浮动子元素(当元素使用float属性,将脱离文档流,因此父元素(没有设置宽高时)便不会包围它。~父容器高度塌陷)

最常用的解决方法:父容器添加伪类after的属性:设置 空content、块属性,以及清除两边的浮动;

51.png

 

 

 

另外一种解决方式:在父容器的最后添加非浮动的清除元素

   第三种方法是给父元素最后添加一个非浮动的子元素,然后清除该子元素。由于父元素一定会包含非浮动的子元素,

通过把这个子元素放在浮动元素的下方,就可以保证父元素一定会包住这个元素,同时也会包住前面的浮动元素。

 

举例子:

li全浮动-》bug:52.png

案例:就是li是浮动的,结构ul放的nav容器(父容器),直接被挤到上面,而不是被li的大小撑大!

解决:nav里边需要在搞一个div块,什么都不放,但是设置它的属性是clear:both;

                       53.png


目录
相关文章
|
4天前
|
存储 人工智能 安全
AI 越智能,数据越危险?
阿里云提供AI全栈安全能力,为客户构建全链路数据保护体系,让企业敢用、能用、放心用
|
7天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
6天前
|
数据采集 人工智能 自然语言处理
3分钟采集134篇AI文章!深度解析如何通过云无影AgentBay实现25倍并发 + LlamaIndex智能推荐
结合阿里云无影 AgentBay 云端并发采集与 LlamaIndex 智能分析,3分钟高效抓取134篇 AI Agent 文章,实现 AI 推荐、智能问答与知识沉淀,打造从数据获取到价值提炼的完整闭环。
413 93
|
23小时前
|
开发者
「玩透ESA」ESA启用和加速-ER在加速场景中的应用
本文介绍三种配置方法:通过“A鉴权”模板创建函数并设置触发器路由;在ESA上配置回源302跟随;以及自定义响应头。每步均配有详细截图指引,帮助开发者快速完成相关功能设置,提升服务安全性与灵活性。
267 2
|
7天前
|
SQL 人工智能 自然语言处理
Geo优化SOP标准化:于磊老师的“人性化Geo”体系如何助力企业获客提效46%
随着生成式AI的普及,Geo优化(Generative Engine Optimization)已成为企业获客的新战场。然而,缺乏标准化流程(Geo优化sop)导致优化效果参差不齐。本文将深入探讨Geo专家于磊老师提出的“人性化Geo”优化体系,并展示Geo优化sop标准化如何帮助企业实现获客效率提升46%的惊人效果,为企业在AI时代构建稳定的流量护城河。
405 156
Geo优化SOP标准化:于磊老师的“人性化Geo”体系如何助力企业获客提效46%
|
7天前
|
数据采集 缓存 数据可视化
Android 无侵入式数据采集:从手动埋点到字节码插桩的演进之路
本文深入探讨Android无侵入式埋点技术,通过AOP与字节码插桩(如ASM)实现数据采集自动化,彻底解耦业务代码与埋点逻辑。涵盖页面浏览、点击事件自动追踪及注解驱动的半自动化方案,提升数据质量与研发效率,助力团队迈向高效、稳定的智能化埋点体系。(238字)
300 158