CSS使用总结
1. 当div使用了float时，如果父div未指定height，父div的height会为0，当父div使用overflow后，高度会撑起来
测试代码：
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#wapper { margin:0px auto; padding:5px; width:800px; background-color:#FFFFFF; overflow:hidden;}
#box01 {width:300px; float:left; background-color:#CCCCCC;}
</style>
</head>
<body style="background-color:#99CC99; ">
<div id="wapper">
<div id="box01">
<div class="head">head</div>
<div class="content">content</div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#wapper { margin:0px auto; padding:5px; width:800px; background-color:#FFFFFF; overflow:hidden;}
#box01 {width:300px; float:left; background-color:#CCCCCC;}
</style>
</head>
<body style="background-color:#99CC99; ">
<div id="wapper">
<div id="box01">
<div class="head">head</div>
<div class="content">content</div>
</div>
</div>
</body>
</html>
2. 当div设置了height时，部分浏览器会自动显示高出的部分，而部分浏览器会隐藏，这时使用 min-height 可以设置最小高度，多出部分自动显示
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#wapper { margin:0px auto; padding:5px; width:800px; background-color:#FFFFFF; overflow:hidden;}
</style>
</head>
<body style="background-color:#99CC99; ">
<div id="wapper">
<div style="float:left; overflow:hidden; min-height:25px; width:100%; background-color:#FFFFFF; ">asdfsfdfsdfsf<br/>sdfsdfs<Br/>sdf<br></div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#wapper { margin:0px auto; padding:5px; width:800px; background-color:#FFFFFF; overflow:hidden;}
</style>
</head>
<body style="background-color:#99CC99; ">
<div id="wapper">
<div style="float:left; overflow:hidden; min-height:25px; width:100%; background-color:#FFFFFF; ">asdfsfdfsdfsf<br/>sdfsdfs<Br/>sdf<br></div>
</div>
</body>
</html>
分类:
HTML
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现