zoukankan      html  css  js  c++  java

  • 清除浮动的方法汇总

    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 }

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

    一个人静静地坐在电脑前写代码，有种武林高手闭关修炼的感觉！
  • 相关阅读:
    第4章 Android移植环境搭建
    第3章 Android移植平台工具介绍
    第2章
    第1章 Android系统的编译和移植实例：
    nfs
    TFTP服务器搭建
    根系统制作
    nfs挂载
    uboot的编译
    交叉工具链的搭建方法
  • 原文地址：https://www.cnblogs.com/SophiaLees/p/9378304.html
Copyright © 2011-2022 走看看