css为什么要清除浮动?
这两天在写静态网页,对清除浮动有一些疑问。查阅《精通css》解决了问题。
1 <div class="nav_cont"> 2 <h3>手机通讯</h3> 3 <ul class="navCont_list "> 4 <li><a href="#">全部手机</a></li> 5 <li><a href="#">1080P高清</a></li> 6 <li><a href="#">双卡手机</a></li> 7 <li><a href="#">拍照神器</a></li> 8 <li><a href="#">老年手机</a></li> 9 <li><a href="#">对讲机</a></li> 10 <li><a href="#">联通专区</a></li> 11 </ul> 12 </div>
其中<li>标签设置了左浮动。如果在“navCont_list”上(即ul的容器上)不清除浮动,得到的效果是这样的。
但是清除浮动后,即
<h3 class="nav_title">手机、数码、相机</h3>
<div class="nav_cont">
<h3>手机通讯</h3>
<ul class="navCont_list clearfix">
<li><a href="#">全部手机</a></li>
<li><a href="#">1080P高清</a></li>
<li><a href="#">双卡手机</a></li>
<li><a href="#">拍照神器</a></li>
<li><a href="#">老年手机</a></li>
<li><a href="#">对讲机</a></li>
<li><a href="#">联通专区</a></li>
</ul>
</div>
则变为
《精通css》原话写到:因为浮动元素不占据空间,所以容器元素不包围它们。添加一个进行清理的空元素可以迫使容器元素包围浮动元素。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥