CSS：清除浮动
周五去听css样式的培训，讲到float导致div不能被撑开的问题，特记录如下：
在写HTML代码的时候，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。
代码：
<html>
<body>
<div style="border:2px solid red;" class0="clearfix">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV1</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV2</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV3</div>
</div>
</body>
</html>
显示效果：
大家可以看到，作为外部容器的边框为红色的DIV，没有被撑开。
这是因为内部的DIV因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度，要怎么解决呢？
解决办法：
代码：
<html>
<body>
<style>
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
</style>
<div style="border:2px solid red;" class="clearfix">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV1</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV2</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV3</div>
</div>
</body>
</html>
显示效果：
最新文章
- C#的类及应用
- 多系统PE win UBUNTU OSX
- [LintCode] Longest Substring Without Repeating Characters
- python新技能get——看！源！码！
- finder怎么才能找到library
- 敏捷软件开发 原则 模式 与实践 - OCP原则
- phone number is not known @w@ have no phone, and thus no phone number
- 织梦dedecms调用栏目的SEO标题、描述、关键字的方法
- 几个简单的Makefile
- java Class的Long id初始化 为0的问题android数据库操做出现的 android.database.sqlite.SQLiteConstraintException: error code 19: constraint failed
- 安全通信 QSslSocket
- 边缘检测之Sobel检测算子
- 解决在IIS中调用Microsoft Office Excel组件后进程无法正常退出的问题
- jndi通俗理解以及它的指令缺陷
- 搭建一个MP-demo(mybatis_plus)
- Windows下Redis的安装和部署
- CLion之C++框架篇-优化开源框架，引入curl，实现get方式获取资源（四）
- （DFS）P1605 迷宫 洛谷
- Tensorflow一些常用基本概念与函数
- Nginx入门【转】