本文主要是讲解如何在 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. 怎么在eclipse中查到这个类用的是哪个jar的类和Eclipse 编译错误 Access restriction:The type *** is not accessible due to restriction on... 解决方案

    找到了一个办法,你先按F3,然后点击Change Attached Source..按钮,在弹出的框里有个路径,我的路径是D:/SNFWorkSpace/JAR/~importu9.jar,然后你去引 ...

  2. cent os 6.5 配置vsftpd

    1. 下载vsftpd: #yum –y install vsftpd 2. 关闭iptables 查看防火墙状态:/etc/init.d/iptables status 关闭:service ipt ...

  3. Ubuntu中开启和关闭防火墙-摘自网络

    1.关闭ubuntu的防火墙 ufw disable开启防火墙ufw enable 2.卸载了iptablesapt-get remove iptables3.关闭ubuntu中的防火墙的其余命令ip ...

  4. 关于 sql server 数据库权限乱七八糟的一些东西

    研究权限这些东西主要是因为今天正好在折腾数据库备份相关的东西,备份好说,备份完了就完了. 但是恢复备份的时候,需要先让数据库脱机,然后恢复,然后再联机,嗯,问题就出在联机上了. 根据 MSDN 的说法 ...

  5. 打造 Vue.js 可复用组件

    Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...

  6. Binlog中最容易踩到的坑

    MySQL高可用架构中,主库复制是非常常见的一种. 当主库宕机后,可以提升一个从库作为新的主库,保证服务可用性:同时可以通过扩展从库,提高整个集群的QPS. 在主从复制架构下,MySQL通过binlo ...

  7. ssh以密钥的方式登录服务器时,只要有密钥可以登服务器,如果有密钥和公钥同时存在(在公钥没问题的情况下可以),但如果公钥有问题,就不能登录成功

    在~/.ssh/下如果只有密钥或公私同时存在时,都可以成功登录服务器,但!!!!!!如果公钥有换成别的服务器的公钥时,是无法登录远程的服务器!!!!

  8. jsonrpc使用

    jsonrpc使用 1.什么是rpc RPC(Remote Procedure Call)远程过程调用,简单说就是通过网络请求服务,不需要了解底层网络技术的协议. 常用语分布式应用程序. 2.rpc数 ...

  9. 【内核】linux内核启动流程详细分析

    Linux内核启动流程 arch/arm/kernel/head-armv.S 该文件是内核最先执行的一个文件,包括内核入口ENTRY(stext)到start_kernel间的初始化代码, 主要作用 ...

  10. Asp.Net上传大文件带进度条swfupload

    Asp.Net基于swfupload上传大文件带进度条百分比显示,漂亮大气上档次,大文件无压力,先看效果 一.上传效果图 1.上传前界面:图片不喜欢可以自己换 2.上传中界面:百分比显示 3.上传后返 ...