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 }

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

    一个人静静地坐在电脑前写代码,有种武林高手闭关修炼的感觉!
  • 相关阅读:
    网页解析Jsoup简单使用
    ios开发中加载的image无法显示
    数据懒加载
    ijkplayer
    ijkplayer的一些优化
    Ambiguous expansion of macro weakify和Ambiguous expansion of macro strongify的警告
    xcode11新项目删除main.storyboard 两种方法
    iOS
    iOS
    iOS 12中获取WiFi的SSID
  • 原文地址:https://www.cnblogs.com/SophiaLees/p/9378304.html
Copyright © 2011-2022 走看看