清除浮动的方法汇总

1、HTML中添加空的div清除浮动

　　HTML代码：

1 <div class="container">
2     <div class="floatDiv">1</div>
3     <div class="floatDiv">2</div>
4     <div class="floatDiv">3</div>
5     <div class="clearfix"></div>
6 </div>

　　CSS代码：

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 .container {
 6     width: 800px;
 7     border: 2px solid #f00;
 8     padding: 10px;
 9 }
10 .container .floatDiv {
11     width: 100px;
12     height: 100px;
13     background: #999;
14     margin-right: 5px;
15     float: left;
16 }
17 /* 清除浮动 */
18 .clearfix {
19     clear: both;
20 }

　　代码少，之前一直用这种方式清除浮动，但是在HTML中增加了空标签，增加了HTML结构的复杂度。

2、after伪类清除浮动

　　HTML代码：

1 <div class="container clearfix">
2     <div>after清浮动</div>
3     <div>after清浮动</div>
4     <div>after清浮动</div>
5 </div>

　　CSS代码：

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 .container {
 6     width: 800px;
 7     /*height: 120px;*/
 8     border: 2px solid #f00;
 9     padding: 10px;
10 }
11 .container div {
12     width: 100px;
13     height: 100px;
14     line-height: 100px;
15     float: left;
16     text-align: center;
17 }
18 .container div:nth-child(1){
19     background: #f00;
20 }
21 .container div:nth-child(2){
22     background: #0f0;
23 }
24 .container div:nth-child(3){
25     background: #00f;
26 }
27 /* 清除浮动 */
28 .clearfix {
29     zoom: 1;
30 }
31 .clearfix:after {
32     clear: both;
33     content: '';
34     display: block;
35     width: 0;
36     height: 0;
37     overflow: hidden;
38 }

　　建议定义公共样式，代码复用。

3、父元素设置overflow:hidden;

　　HTML代码：

1 <div class="container">
2     <div>111</div>
3     <div>222</div>
4     <div>333</div>
5 </div>

　　CSS代码：

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 .container {
 6     width: 800px;
 7     border: 2px solid #000;
 8     padding: 10px;
 9     /* 清除浮动 */
10     overflow: hidden;
11 }
12 .container div {
13     width: 100px;
14     height: 100px;
15     line-height: 100px;
16     background: #f00;
17     text-align: center;
18     margin-right: 5px;
19     float: left;
20 }

4、父元素设置overflow:auto;

　　HTML代码：

1 <div class="container">
2     <div>111</div>
3     <div>222</div>
4     <div>333</div>
5 </div>

　　CSS代码：

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 .container {
 6     width: 800px;
 7     border: 2px solid #000;
 8     padding: 10px;
 9     /* 清除浮动 */
10     overflow: auto;
11 }
12 .container div {
13     width: 100px;
14     height: 100px;
15     line-height: 100px;
16     background: #f00;
17     text-align: center;
18     margin-right: 5px;
19     float: left;
20 }

　　以上方法，推荐使用第二种。

一个人静静地坐在电脑前写代码，有种武林高手闭关修炼的感觉！

相关阅读:
Dedecms自定义表单后台列表展现方式更改
 FileZilla出现Failed to convert command to 8 bit charset
织梦中data文件夹是存放什么内容的
 Dedecms去掉URL中a目录的方法
 FileZilla出现Failed to convert command to 8 bit charset
Linux虚拟主机通过FTP软件创建目录时提示550 Create Directory Operation Failed
CSharp设计模式读书笔记（1）：简单工厂模式(学习难度：★★☆☆☆，使用频率：★★★☆☆)
Ubuntu 10.04 Desktop 快速添加微软雅黑字体
 firefox10的界面确实领先
 ubuntu下断点续传工具 aria2
原文地址：https://www.cnblogs.com/SophiaLees/p/9378304.html