网页中，经常用浮动的div来布局，但是会出现父元素因为子元素浮动引起内部高度为0的问题，为了解决这个问题，我们需要清除浮动，下面介绍4中清除浮动的方法。

　　在CSS中，clear属性用户清除浮动，语法：选择器{ clear: left || right || both; };

方法一：额外标签法

　　在浮动元素末尾添加一个空的标签，如：<div style="clear: both"></div>

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .box1 {
  8.              width: 600px;
  9.              background-color: gray;
  10.          }
  11.          .box2 {
  12.              width: 600px;
  13.              height: 200px;
  14.              background-color: purple;
  15.          }
  16.          .son1 {
  17.              width: 150px;
  18.              height: 100px;
  19.              background-color: skyblue;
  20.              float: left;
  21.          }
  22.          .son2 {
  23.              width: 250px;
  24.              height: 100px;
  25.              background-color: hotpink;
  26.              float: left;
  27.          }
  28.      </style>
  29.  </head>
  30.  <body>
  31.      <div class="box1">
  32.          <div class="son1"></div>
  33.          <div class="son2"></div>
  34.          <!-- 额外标签法 -->
  35.          <div style="clear: both;"></div>
  36.      </div>
  37.      <div class="box2">
  38.  
  39.      </div>
  40.  </body>
  41.  </html>

方法二：父级添加overflow属性法

　　给父级添加overflow属性，触发BFC的方式，可以实现清除浮动效果。

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .box1 {
  8.              width: 600px;
  9.              background-color: gray;
  10.              overflow: hidden;
  11.          }
  12.          .box2 {
  13.              width: 600px;
  14.              height: 200px;
  15.              background-color: purple;
  16.          }
  17.          .son1 {
  18.              width: 150px;
  19.              height: 100px;
  20.              background-color: skyblue;
  21.              float: left;
  22.          }
  23.          .son2 {
  24.              width: 250px;
  25.              height: 100px;
  26.              background-color: hotpink;
  27.              float: left;
  28.          }
  29.      </style>
  30.  </head>
  31.  <body>
  32.      <!-- 父级添加overflow属性法 -->
  33.      <div class="box1">
  34.          <div class="son1"></div>
  35.          <div class="son2"></div>
  36.      </div>
  37.      <div class="box2">
  38.  
  39.      </div>
  40.  </body>
  41.  </html>

方法三：使用after伪元素法

　　使用:after方式，为第一种方法的升级版。

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .box1 {
  8.              width: 600px;
  9.              background-color: gray;
  10.          }
  11.          .box2 {
  12.              width: 600px;
  13.              height: 200px;
  14.              background-color: purple;
  15.          }
  16.          .son1 {
  17.              width: 150px;
  18.              height: 100px;
  19.              background-color: skyblue;
  20.              float: left;
  21.          }
  22.          .son2 {
  23.              width: 250px;
  24.              height: 100px;
  25.              background-color: hotpink;
  26.              float: left;
  27.          }
  28.          .clearfix:after {
  29.              content: ".";   /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/
  30.              display: block;
  31.              height: 0; /*高度为0*/
  32.              visibility: hidden;/*隐藏盒子*/
  33.              clear:both;/*清除浮动*/
  34.          }
  35.          .clearfix {
  36.              *zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/
  37.          }
  38.      </style>
  39.  </head>
  40.  <body>
  41.      <div class="box1 clearfix">
  42.          <div class="son1"></div>
  43.          <div class="son2"></div>
  44.      </div>
  45.      <div class="box2">
  46.  
  47.      </div>
  48.  </body>
  49.  </html>

方法四：使用before和after双伪元素法

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .box1 {
  8.              width: 600px;
  9.              background-color: gray;
  10.          }
  11.          .box2 {
  12.              width: 600px;
  13.              height: 200px;
  14.              background-color: purple;
  15.          }
  16.          .son1 {
  17.              width: 150px;
  18.              height: 100px;
  19.              background-color: skyblue;
  20.              float: left;
  21.          }
  22.          .son2 {
  23.              width: 250px;
  24.              height: 100px;
  25.              background-color: hotpink;
  26.              float: left;
  27.          }
  28.          .clearfix:before, .clearfix:after {
  29.              content: "";
  30.              display: table; /*可以触发BFC BFC可以清除浮动*/
  31.          }
  32.          .clearfix:after {
  33.              clear:both;/*清除浮动*/
  34.          }
  35.          .clearfix {
  36.              *zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/
  37.          }
  38.      </style>
  39.  </head>
  40.  <body>
  41.      <div class="box1 clearfix">
  42.          <div class="son1"></div>
  43.          <div class="son2"></div>
  44.      </div>
  45.      <div class="box2">
  46.  
  47.      </div>
  48.  </body>
  49.  </html>

　　

【Web】网页清除浮动的方法的更多相关文章

  1. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  2. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  3. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

  4. css清除浮动的方法总结

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下     清除浮动是每一个 we ...

  5. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

  6. 前端开发CSS清除浮动的方法有哪些？

    在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...

  7. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  8. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  9. 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...

随机推荐

  1. Leading and Trailing （数论）

    Leading and Trailing https://vjudge.net/contest/288520#problem/E You are given two integers: n and k ...

  2. 从零开始写bootloader（1）

          下面是具体的代码实现:  #define S3C2440_MPLL_200MHZ ((0x5C<<12)|(0x01<<4)|(0x02)) #define MEM ...

  3. mybatis BigDecimal Double Long 的坑爹事

    写接口的时候别用 public Map<String,Double> selectForRealRemainer(Orders orders); 用这样就行 public Map<S ...

  4. 通过docker-compose构建ghost博客(二)

    上一篇通过yml文件构建 ghost博客,这次通过构建nginx服务,并添加反向代理来运行搭建的ghost博客. 目录结构 ghost.conf 就是 定义的nginx 加载的配置文件 server ...

  5. Spring配置文件XML详解

    1.bean的基本属性配置: <!-- id是bean的标识符,必须唯一,如果没有配置id,name默认为标识符 如果配置了id,有配置了name,那么name为别名 name可以设置多个别名, ...

  6. java中钩子方法的概念

    钩子方法源于设计模式中模板方法(Template Method)模式,模板方法模式的概念为:在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新 ...

  7. ubuntu 安装Pangolin 过程

    Pangolin 是一款开源的OPENGL显示库,可以用来视频显示.而且开发容易. 代码我们可以从Github 进行下载:https://github.com/zzx2GH/Pangolin.git ...

  8. 函数名、闭包、装饰器 day11

    1, 函数名的内存地址,print(func) 2, 函数名可以赋值给其他变量 3, 函数名可以当做容器类的元素 4, 函数名可以当做函数的参数. 5, 函数名可以当做函数的返回值. 学名:第一对象 ...

  9. Vue 局部组件和全局组件的使用

    <template> <div id="app"> <!--<img alt="Vue logo" src="./ ...

  10. pycharm 配置支持vue

    http://www.cnblogs.com/c-x-m/p/9229199.html