浅谈css清除浮动(clearfix和clear)的用法


Posted in HTML / CSS onMay 21, 2023

本文主要是讲解如何在 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:after{content:'\20';display:block;height:0;clear:both}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}

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

以上这篇浅谈css清除浮动(clearfix和clear)的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

 
HTML / CSS 相关文章推荐
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 #HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 #HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 #HTML / CSS
HTML中link标签属性的具体用法
May 07 #HTML / CSS
css弧边选项卡的项目实践
May 07 #HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 #HTML / CSS
CSS实现鼠标悬浮动画特效
You might like
PHP 中常量的知识整理
2017/04/14 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python操作mysql代码总结
2018/06/01 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
银行优秀员工事迹
2014/02/06 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
课外小组活动总结
2014/08/27 职场文书
党性教育心得体会
2014/09/03 职场文书
授权委托书公证
2014/09/14 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
2019 入党申请书范文
2019/07/10 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python