首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >清除浮动的方法

清除浮动的方法

作者头像
echobingo
发布2018-04-25 15:13:36
9940
发布2018-04-25 15:13:36
举报

本章主要介绍三种常用的清除浮动的方法,主要包括:


[1] 增加一个空 div, 使用 clear:both 将浮动元素 "挤到" 父元素中

[2] 在父元素里增加 overflow: hidden

[3] 使用伪类 :after (推荐)


  • 清除浮动,其实就是清除元素被定义浮动之后带来的脱离文档流的影响。如果我们不想浮动元素后面的文字环绕着它,而是希望后面的元素回归到正常文档流时候的布局,这个时候我们可以使用清除浮动来实现。
  • 如果父元素不设置高度,并且没有使用清除浮动,浮动的子元素就无法填入到父元素中,造成父元素高度塌陷。高度的塌陷使我们页面后面的布局不能正常显示。
<!DOCTYPE html>
<html>
<head>
    <title>清除浮动</title>
    <meta charset="utf-8">
</head>
<style type="text/css"> 
    /* 方法1: 增加一个空 div, 将浮动元素 "挤到" 父元素中 */
   .div1{ 
      width: 400px;
        border: 1px solid red; 
    }
   .div2{
        border: 1px solid red; 
        margin: 10px 0;
        width: 400px; 
    }
   .left{
        float: left;
        width: 20%;
        background:#DDD;
    }
   .right{
        float: right;
        width: 30%;
        background:#DDD;
   }
   .clear { clear: both; }    /* 关键代码 */

   /* 方法2: 在父元素里增加 overflow: hidden */
   .overflow { overflow: hidden; }   /* 关键代码 */

   /* 方法3: 使用伪类 :after (推荐) */
   /* 解析原理:
     1) display:block 使生成的元素以块级元素显示,占满剩余空间;
     2) height:0 避免生成内容破坏原有布局的高度。
     3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;
     4)通过 content: " "生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:" ",有些版本可能content 里面内容为空,firefox直到7.0 content:"" 仍然会产生额外的空隙;
     5)zoom:1 触发IE hasLayout。 
     通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0, line-height:0。
    */

   .clearfix:before, .clearfix:after {
        content: " ";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;  /* IE6、7的兼容性问题 */
    }

    /* 等价于 */
    .clearfloat:after { display:block; clear:both; content:""; visibility:hidden; height:0 }
    .clearfloat{ zoom:1; }

</style> 
<body>
  <!-- 方法1  -->
  <div class="div1"> 
    <div class="left">Left1</div> 
    <div class="right">Right1</div> 
    <div class="clear"></div>  <!-- 缺点: 添加一个额外的 div 标签 -->
  </div>
  <div class="div2">方法1: 增加一个空 div, 将浮动元素 "挤到" 父元素中</div>

  <!-- 方法2  -->
  <div class="div1 overflow">   <!-- 缺点:会隐藏超出父元素的部分, 有时候这并不是预期的效果 -->
    <div class="left">Left2</div> 
    <div class="right">Right2</div> 
  </div>
  <div class="div2">方法2: 在父元素里增加 overflow: hidden</div>

  <!-- 方法3  -->
  <div class="div1 clearfix">   <!-- class="div1 clearfloat" 也可以 -->
    <div class="left">Left3</div> 
    <div class="right">Right3</div> 
 </div>
 <div class="div2">方法3: 使用伪类 :after (推荐)</div>
</body>
</html>

清除浮动的三种方法.png

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.05.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本章主要介绍三种常用的清除浮动的方法,主要包括:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档