本文主要是讲解如何在 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. xp中使用grubdos安装ubuntu13.04

    http://www.cnblogs.com/ggjucheng/archive/2012/08/18/2645916.html 根据以上帖子安装ubuntu13.04 当重启,进入ubuntu in ...

  2. Atitti 过程导向 vs 结果导向 attlax的策

    Atitti 过程导向 vs 结果导向 attilax的策略 1. 结果导向的问题 以结果为导向”的明显弊端2 1.1. 白猫黑猫的策略是错误的2 1.2. 为了目的不择手段,完全违背了程序正义原则2 ...

  3. iOS提交iTunes审核时出现Invalid Binary错误

    xcode5编译一个xcode4时写的代码,提交iTunes审核时出错. 1.iOS提交审核时出现Invalid Binary错误 2.收到邮件: iPhone 5 Optimization Requ ...

  4. Vivado下生成及烧写MCS文件

    Jtag模式: 1.打开Open Hardware Manager 2. Tools ->Auto Connect 3.TCL输入: write_cfgmem -format MCS -size ...

  5. 使用FiddlerCore来截取替换Http请求中的网页内容

    做过测试的应该都知道Fiddler,它可以很方便截取Internet上的网页替换成本地的,或者修改其中的一部分内容后呈现.简单地说就是可能监测所有HTTP连接,设置断点,胡乱修改.是测试调试的一件利器 ...

  6. redisHelper

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using ServiceS ...

  7. error occurred during the file system check

    fsck -c 然后一路:y reboot 问题解决!!!

  8. 源码安装mysql5.6x启动报错:[ERROR] Can't find messagefile '/data/mysqldata/3306/english/errmsg.sys'

    :: mysqld_safe Starting mysqld daemon with databases from /data/mysqldata//data -- :: [Warning] The ...

  9. nil

    Lua中特殊的类型,他只有一个值:nil:一个全局变量没有被赋值以前默认值为nil:给全局变量负nil可以删除该变量.

  10. vue 的事件冒泡

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...