浅谈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 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
html form表单基础入门案例讲解
Jul 21 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
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
php表单处理操作
2017/11/16 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
详谈js模块化规范
2017/07/07 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python获取指定时间差的时间实例详解
2017/04/11 Python
Python实现单词翻译功能
2017/06/06 Python
Python SQLite3简介
2018/02/22 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python实现多属性排序的方法
2018/12/05 Python
python opencv摄像头的简单应用
2019/06/06 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
如何开启linux的ssh服务
2015/02/14 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
个人简历的自荐信
2013/10/23 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
上班上网检讨书
2014/01/29 职场文书
学校教研活动总结
2014/07/02 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python