浅谈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 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
不要在HTML中滥用div
May 08 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
YB217、YB235、YB400浅听
2021/03/02 无线电
php删除数组元素示例分享
2014/02/17 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
javascript数组详解
2014/10/22 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
劳动竞赛口号
2014/06/16 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
行政处罚告知书
2015/07/01 职场文书