清除浮动的方法

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


[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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 水平居中和垂直居中

    本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

    echobingo
  • 常见的布局实现

    本章主要介绍常见的布局实现,包括: ---- [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 ---- [1] 两列布局 子列固定宽度(设...

    echobingo
  • Leetcode【526、667、932】

    这道题是一道构造题,即构造一个长度为 N 的自然序列,满足整除关系: i % nums[i] = 0 或 nums[i] % i = 0(i 为第 i 个位置)...

    echobingo
  • 一天带你入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    用户1518699
  • 模板引擎(比如ejs)中如何显示markdown语法编写的内容

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    acoolgiser
  • 一天带入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    十月梦想
  • 前端知识复习(一)

    span不可以,img和video可以 span 属于行内非替换元素不能设置宽高,img, video 属于行内替换元素,可以设置宽高

    治电小白菜
  • 老雷PHP全栈开发教程之Vue基础教程

    Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,Vue通过数据驱动构建ui界面。

    老雷PHP全栈开发
  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发
  • [前端][css]float left布局换行不正常问题

    最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

    Tuzei

扫码关注云+社区

领取腾讯云代金券