css清除浮动的两种方式(clearfix和clear)
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中。两种方式怎么写都在base.css中。
在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都没清除浮动,导致经常会有div包不住子级的东西(经常一审查height=0)。现利用两例子来巩固下。
<!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>
使用过css浮动的人都深知,浮动会引起很多未知问题。而这儿就是,在父级demo中因为没有设置高度,原本它应该靠着子级内容撑开的,但是因为子级内容浮动而脱离了文档流,故而.demo的div无高度,也就自然看不到灰色背景色。这样自然最快捷的我们想到加一个高度,这样确实可以,但是其一就丢掉了将清除浮动意义,其二是若是在项目中,这个部分的内容都是动态数据,我们就不能给它定死高,只能清浮动。我记得我经常用的就是overflow:hidden以及clear:both;
<!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之关于clearfix——清除浮动》。
css清除浮动的两种方式(clearfix和clear)的更多相关文章
- CSS清除浮动的几种方式
浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- css清除浮动的几种方式,哪种最合适?
细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...
- HTML/css清除浮动的几种方式
浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...
- css清除浮动的3种方式
前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...
- css 清除浮动的几种方式
1.给浮动的元素的父级添加 overflow:hidden;属性 ul>不浮动 添加overflow:hidden; li>浮动 2.给浮动的元素的父级添加after伪类 ul:after ...
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- css考核点整理(一)-浮动的理解和清除浮动的几种方式
浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...
- 前端老司机常用的方法CSS如何清除浮动?清除浮动的几种方式
在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性.爱,是因为通过浮动,我们能很方便地进行布局:恨,是因为浮动之后遗留下来太多的问题需要解决.下面本篇文章给大家介绍CSS清除 ...
随机推荐
- Winform基础 -- 菜单
快速创建默认菜单 使用控件 MenuStrip : 点击菜单的右上方小三角:选择 [插入标准项] 即可显现出标准的菜单格式: 如果想添加更多的菜单项,可以在 [请在此处键入] 处输入菜单项的名称 ...
- cojs QAQ的矩阵 题解报告
题目描述非常的清晰 首先我们考虑(A*B)^m的求法,这个部分可以参考BZOJ 杰杰的女性朋友 我们不难发现(A*B)^m=A*(B*A)^(m-1)*B A*B是n*n的矩阵,而B*A是k*k的矩阵 ...
- 【Linux高频命令专题(8)】五大查询命令
find 格式 find 路径 -命令参数 [输出形式] 路径:告诉find在哪儿去找你要的东西 命令参数:参考下面 输出形式:输出形式很多,-print,-printf,-print,-exec,- ...
- 缓存初解(五)---SpringMVC基于注解的缓存配置--web应用实例
之前为大家介绍了如何使用spring注解来进行缓存配置 (EHCache 和 OSCache)的简单的例子,详见 Spring基于注解的缓存配置--EHCache AND OSCache 现在介绍一下 ...
- :Hibernate逍遥游记-第16管理session和实现对话
1. package mypack; public class Monkey{ private Long id; private String name; private int count; pri ...
- 一步一步开发sniffer(Winpcap+MFC)(一)工欲善其事,必先配环境——配置winpcap开发环境(图文并茂,非常清楚)
http://blog.csdn.net/litingli/article/details/5950962
- 34. Search for a Range
题目: Given a sorted array of integers, find the starting and ending position of a given target value. ...
- C++:this指针
this指针 this关键字:表示本类中的对象成员,可以通过this指针访问当前类的成员//举例 //例 3.18 隐藏this指针的引例 #include<iostream> using ...
- mysqldump常用于MySQL数据库逻辑备份
mysqldump常用于MySQL数据库逻辑备份. 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dump ...
- 关于为什么java需要垃圾回收
为什么java采用垃圾回收而c++却不采用,这是因为在java中,所有对象变量都是引用,当一个引用被新对象覆盖掉时,就没有引用指向原来的对象了,这个对象就“失控了”. 而C++中,除非使用特殊符号&a ...