高度塌陷的最终解决方案
2022/3/27 23:25:12
本文主要是介绍高度塌陷的最终解决方案,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、使用 clear 解决
1.clear 简介:
给一块元素设置 clear 属性后,将消除它上面元素因浮动对它造成的影响。(可选值:left,right,both)
For example:
<style> .box1{ width: 200px; height: 200px; background-color: #bfa; float: left; } .box2{ width: 200px; height: 200px; background-color: aqua; clear: both; } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> </body> 此时,box2 因为有了clear 的 “净化” Buff,从而不会跑到 box1 正下方(看不见了),而是像 box1 没有浮动一样,呆在box1 底部。
2. 那如何使用 clear 的神奇特性来解决高度塌陷呢:
so easy,此时只要再在box1内创建一个 box3,使用 clear 消除box2 浮动的影响就好啦:
<style> .box1{ border: red 10px solid;} .box2{ width: 100px; height: 100px; background-color: #bfa; float: left; .box3{ clear: left; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <div class="box3"></div> </div> 3. 对此方案的评价: 我们知道,html 解决结构,CSS解决样式,而我们添加了一个 div 标签,仅仅来解决表现的问题,应该不太合适吧。所以,有没有另一种方法,仅用CSS就可以解决呢?答案即为下面的方案。 二 、使用 after 伪类解决 根据方案一,我们应该找一个东西,它在 box1 的最后面,且能撑起box1,那除了设置 box3,我们还有另一种方式:after 伪类: <style> .box1{ border: red 10px solid;
} .box2{ width: 100px; height: 100px; background-color: #bfa; float: left; } .box1::after{ 注意:这里需要将其设置为 block,才能使用 clear display: block; content: ' ' ; clear: left; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> 总结:两种方案其实都可以达到目的,根据个人喜好选一种咯 ~
这篇关于高度塌陷的最终解决方案的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行