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

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

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8"/>

    <title>如何在html中使用clearfix和clear</title>

    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>

    <style type="text/css">

    .fl{float:left;}

    .demo{background:#ccc;}

    .item1{background:#f90;height:100px;width:100px;}

    .item2{background:#fc0;height:200px;width:100px;}

    </style>

</head>

<body>

    <div class="demo">

        <div class="fl item1"></div>

        <div class="fl item2"></div>

    </div>

</body>

</html>

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

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

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8"/>

    <title>如何在html中使用clearfix和clear</title>

    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>

    <style type="text/css">

    .fl{float:left;}

    .demo{background:#ccc;}

    .item1{background:#f90;height:100px;width:100px;}

    .item2{background:#fc0;height:200px;width:100px;}

    </style>

</head>

<body>

    <h2>用 clear 清除浮动</h2>

    <div class="demo">

        <div class="fl item1"></div>

        <div class="fl item2"></div>

        <div class="clear"></div>

    </div>

    <h2>用 clearfix 清除浮动</h2>

    <div class="clearfix demo">

        <div class="fl item1"></div>

        <div class="fl item2"></div>

    </div>

</body>

</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. sublime在混杂的log数据中提取你想要的内容

    前几天因为同事一个sql写的有问题,导致我这边处理mysql入库出现数据丢失,没什么办法啊,为了回复数据,只能去翻前两天的log了,但是怎么从十几个几十兆的文件中找到我们需要的数据然后提取出来呢,我的 ...

  2. js中表达式 >>> 0 浅析 (以及用php简单翻译)

    今天在看lodash的源码中slice这个函数实现的时候发现了里面有这么一行代码 length = start > end ? 0 : ((end - start) >>> 0 ...

  3. 简简单单搞掂恼人的Laravel 5安装

    想折腾下Laravel 5了.Laravel是这世界上最好且没有之一的语言──PHP──的众多框架中的一个,是我比较感兴趣的PHP Web Framework. 但是安装Laravel可不是件容易的事 ...

  4. haproxy 同一域名下分发请求

    http://www.th7.cn/Program/java/201608/936162.shtml https://my.oschina.net/lockupme/blog/733375 还有一点要 ...

  5. jQuery学习笔记（简介，选择器）

    jQuery优势 1. 强大的选择器.jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器. 2. 出色的DOM操作封装 3. 可靠的事件处理机制 ...

  6. linux分区详解

    点评:如果你想了解linux分区,请务必认真阅读本文.对于初学者来说,linux分区不像windows下那么一目了解.    Linux 分区的规定      1. 设备管理 在 Linux 中,每一 ...

  7. php正则表达式入门-常用语法格式

    php正则表达式入门-常用语法格式 原文地址:http://www.jbxue.com/article/24467.html 分享下php正则表达式中的一些常用语法格式,用于匹配字母.数字等,个人感觉 ...

  8. DIOCP开源项目-高效稳定的服务端解决方案(DIOCP + 无锁队列 + ZeroMQ + QWorkers) 出炉了

    [概述] 自从上次发布了[DIOCP开源项目-利用队列+0MQ+多进程逻辑处理,搭建稳定,高效,分布式的服务端]文章后,得到了很多朋友的支持和肯定.这加大了我的开发动力,经过几个晚上的熬夜,终于在昨天 ...

  9. 【机器学习】粗糙集属性约简算法与mRMR算法的本质区别

    1. 粗糙集属性约简算法仅仅选出属性重要度大的条件加入约减中,没有考虑约简中条件属性相互之间的冗余性,得到的约简往往不是都必要的,即含有冗余属性. 2. mRMR算法则除了考虑特征与类别之间的相关性, ...

  10. 管理 python logging 日志使用

    1.日志级别 日志一共分成5个等级,从低到高分别是:DEBUG INFO WARNING ERROR CRITICAL. DEBUG:详细的信息,通常只出现在诊断问题上INFO:确认一切按预期运行WA ...