本文主要是讲解如何在 html 中使用 clearfix 和 clear，针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了，具体样式点击此处。

下面就谈谈对于这两个 class 的用法，首先我们先看个例子：

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <title>如何在html中使用clearfix和clear</title>
  6.     <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
  7.     <style type="text/css">
  8.     .fl{float:left;}
  9.     .demo{background:#ccc;}
  10.     .item1{background:#f90;height:100px;width:100px;}
  11.     .item2{background:#fc0;height:200px;width:100px;}
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="demo">
  16.         <div class="fl item1"></div>
  17.         <div class="fl item2"></div>
  18.     </div>
  19. </body>
  20. </html>

我们都知道使用浮动会产生很多未知的问题，通过上面的例子我们可以发现 class="demo" 的高度并没有被里面的 div 给撑开，这是因为里面的 div 产生浮动而脱离了该文档，因为 demo 本身没有高度，所以我们看不到它的灰色背景。当然只要给 demo 一个高度就行了，但是这就脱离了本文的目的（有时我们希望外层 div 的高度由里面的内容来决定）。

既然是浮动产生的问题，那么只要清除浮动就可以了，相信高手们有很多清除浮动的方法，比如 overflow:hidden。下面我将介绍用 clearfix 和 clear 来清除浮动。

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <title>如何在html中使用clearfix和clear</title>
  6.     <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
  7.     <style type="text/css">
  8.     .fl{float:left;}
  9.     .demo{background:#ccc;}
  10.     .item1{background:#f90;height:100px;width:100px;}
  11.     .item2{background:#fc0;height:200px;width:100px;}
  12.     </style>
  13. </head>
  14. <body>
  15.     <h2>用 clear 清除浮动</h2>
  16.     <div class="demo">
  17.         <div class="fl item1"></div>
  18.         <div class="fl item2"></div>
  19.         <div class="clear"></div>
  20.     </div>
  21.     <h2>用 clearfix 清除浮动</h2>
  22.     <div class="clearfix demo">
  23.         <div class="fl item1"></div>
  24.         <div class="fl item2"></div>
  25.     </div>
  26. </body>
  27. </html>

我们发现，clearfix 主要是用在浮动层的父层，而 clear 主要是用在浮动层与浮动层之间，和浮动层同一级，如果想要撑开父层的高度，clear 就要放在最后。

很难说明这两个方法哪个更好，只能说具体需求具体对待。

也许有人会问，clearfix 的样式这样写为什么会清除浮动？这些样式都有什么意义？这需要童鞋们对 css 的伪类有一定的了解，具体内容请点击《闲聊CSS之关于clearfix——清除浮动》。

【css】清除浮动（clearfix 和 clear）的用法的更多相关文章

  1. css清除浮动clearfix:after的用法详解

    如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法:  CSS代码: 复制代码 代码如下: .clearfix:after ...

  2. CSS 清除浮动 clear 属性

    CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...

  3. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  4. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

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

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

  6. 什么是CSS清除浮动？

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  7. css 清除浮动 兼容IE+, FF

    上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

  8. css清除浮动大全，共8种方法

    我看的网页的网址:http://hi.baidu.com/kongcheng2012/item/2b1250d4452e802538f6f705 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效 ...

  9. CSS清除浮动各种方法

    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...

  10. css清除浮动的集中方法

    一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...

随机推荐

  1. easyui中combobox的值改变onchang事件

    今天在公司里,那jquery中的easy-ui-里面的combobox,真的郁闷死了! 把郁闷的事情记下来,下次就不会犯错了! 首先,肯定少不了,引入jquery的js文件!请大家注意了! 下面是代码 ...

  2. pip安装包时遇到的Bug

    [背景] 今天打包人生中的第一个package到PyPi,在linux上执行pip3 install mysqltools-python安装一点问题都没有,打脸的是在自己的MAC上 居然安装不上 pi ...

  3. django -- while time zone support is active

    一.先看报错: django 在处理datetime类型的的报错/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site ...

  4. 怎么安装预装的win8三星笔记本改win7再装Ubuntu问题[zz]

    随着科技的高速发展,人们对电脑的要求越来越高,对电脑系统的要求亦是,那些电脑自带的系统,很多时候已经无法满足人们的需求了,而为了满足自己的需求,人们往往会为电脑改装新系统,而本文要和大家一起分享的话题 ...

  5. 给Elasticsearch 5.2.2 设置用户权限 how to setting security for elasticsearch on windows

    1. download the plugin of elasticsearch: 下载 readonlyrest-1.14.0_es5.2.2.zip 2. install readonlyrest ...

  6. win 7 下合并多个表格

    首先我这里从服务器上下载了一大堆的表格 分类放好之后 这里我们需要把每一类的表格合并成一张表格 这里我们使用win 7下的copy的命令 这里我的表格的格式是csv 使用cmd 我们先cd到你的表格的 ...

  7. HLS

    2018-04-14 WMY-竹海 相约电子ee 首先要启动软件,界面如下所示: 以最简单的矩阵运算为例吧,来介绍一下HLS的使用. 对于HLS的输入为C++或C代码,当然systemC也可以,主要完 ...

  8. ISE中的Force Process Up-to-Date功能：ISE中如何在未综合实现的前提下打开ChipScope ？

    ISE中如何在未综合实现的前提下双击Analyze Design Using ChipScope打开ChipScope ? 有时,你正在ISE中调试程序,在ChipScope中看到了现象,顺手修改了程 ...

  9. [svc]mount命令及解决因/etc/fstab错误导致系统不能启动故障

    mount命令-手动挂载设备 格式: mount [options] [-t fstype] [-o option] 设备 挂载点 mount -n -o remount,rw / - Mount t ...

  10. 【Unity】11.5 物理材质 (Physics Material)

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 物理材质 (Physics Material) 用于调整碰撞对象的摩擦力和反弹效果. 二.创建物理材质 要创建物理材质 ...