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

clear

96 浏览量 2020-12-13 08:26:00 上传评论收藏 44KB PDF 举报

资源推荐

资源详情

资源评论

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

本文主要是讲解如何在 html 中使用 clearfix 和 clear，针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我

就不写了。

下面就谈谈对于这两个 class 的用法，首先我们先看个例子：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>

<head>

<title>如何在html中使用clearfix和clear</title>

.fl{float:left;}

.demo{background:#ccc;}

.item1{background:#f90;height:100px;width:100px;}

.item2{background:#fc0;height:200px;width:100px;}

</style>

</head>

<body>

</div>

</body>

</html>

我们都知道使用浮动会产生很多未知的问题，通过上面的例子我们可以发现 class="demo" 的高度并没有被里面的 div 给撑

开，这是因为里面的 div 产生浮动而脱离了该文档，因为 demo 本身没有高度，所以我们看不到它的灰色背景。当然只要给

demo 一个高度就行了，但是这就脱离了本文的目的（有时我们希望外层 div 的高度由里面的内容来决定）。

既然是浮动产生的问题，那么只要清除浮动就可以了，相信高手们有很多清除浮动的方法，比如 overflow:hidden。下面我将

介绍用 clearfix 和 clear 来清除浮动。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>

<head>

<title>如何在html中使用clearfix和clear</title>

.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>

<h2>用 clearfix 清除浮动</h2>

</div>

</body>

</html>

我们发现，clearfix 主要是用在浮动层的父层，而 clear 主要是用在浮动层与浮动层之间，和浮动层同一级，如果想要撑开父

层的高度，clear 就要放在最后。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38517212

粉丝: 8
资源: 952

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

css之clearfix的用法深入理解(必看篇)

css hack之清除浮动(clearfix)

清除浮动(clearfix 和 clear)的用法示例介绍

css清除浮动clearfix:after的用法详解（附完整代码）

.clear 万能清除浮动(clearfix:after)

CSS的clear属性清除浮动的基本用法示例

浅谈CSS中的clear清除浮动

CSS中使用clearfix清除浮动的方法

css中clearfix清除浮动的用法及其原理示例介绍

CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器

css别忘记清除浮动clear:both

clearfix:after清除浮动的用法及测试代码

zcxiaobao#everyday-insist#css清除浮动的几种方法(2020.01.08)1

最简洁的CSS清除浮动的方法

css 的 float 与clear

浅谈css中浮动和清除浮动带来的影响

并行程序设计导论课后答案_2.7z

加速度积分求速度和位移的c语言算法程序

数据结构课设用C、C++写旅游区景点导游系统头文件(用文件存储，DFS，DIJ算法），完全免费！没有要积分，能多给我点点赞吗？

DeepLearning之LSTM模型输入参数：time_step, input_size, batch_size的理解

最新资源