最近总是在用浮动，这两种方式总是浮现在眼前，或者说去掉父级和同级浮动样式总在思考中。两种方式怎么写都在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）的更多相关文章

  1. CSS清除浮动的几种方式

    浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...

  2. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  3. css清除浮动的几种方式，哪种最合适？

    细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...

  4. HTML/css清除浮动的几种方式

    浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...

  5. css清除浮动的3种方式

    前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...

  6. css 清除浮动的几种方式

    1.给浮动的元素的父级添加 overflow:hidden;属性 ul>不浮动 添加overflow:hidden; li>浮动 2.给浮动的元素的父级添加after伪类 ul:after ...

  7. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  8. css考核点整理（一）-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

  9. 前端老司机常用的方法CSS如何清除浮动？清除浮动的几种方式

    在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性.爱,是因为通过浮动,我们能很方便地进行布局:恨,是因为浮动之后遗留下来太多的问题需要解决.下面本篇文章给大家介绍CSS清除 ...

随机推荐

  1. tomcat 解析（二）-消息处理过程

    接下来我们应该去了解一下 tomcat 是如何处理jsp和servlet请求的. 1.  我们以一个具体的例子,来跟踪TOMCAT, 看看它是如何把Request一层一层地递交给下一个容器, 并最后交 ...

  2. 2015年最新中国知网CNKI免费账号直接入口

    以下是Free9免费资源网小编收集整理的2015年最新中国知网CNKI免费账号直接入口,现免费分享给大家(仅供测试使用),此类文献数据库资源有时效性,希望对您的学习.工作上有所帮助! 中国知网直接入口 ...

  3. POJ3468 A Simple Problem With Integers 树状数组 区间更新区间询问

    今天学了很多关于树状数组的技巧.一个是利用树状数组可以简单的实现段更新,点询问(二维的段更新点询问也可以),每次修改只需要修改2个角或者4个角就可以了,另外一个技巧就是这题,原本用线段树做,现在可以用 ...

  4. [主席树]ZOJ2112 && BZOJ1901 Dynamic Rankings

    题意:n个数,q个询问 (n<=50000, q<=10000) Q x y z 代表询问[x, y]区间里的第z小的数 C x y    代表将(从左往右数)第x个数变成y 上篇介绍了在 ...

  5. [wikioi]线段树练习 2

    http://codevs.cn/problem/1081/ #include <vector> #include <iostream> #include <string ...

  6. 【Linux高频命令专题(18)】tail

    概述 tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但 ...

  7. spring autoWire注解和@resource注解区别

    1.autoWire注解主要是按类型匹配.因为autowire的扫描机制,是按照接口类型来扫描bean的. 而JSR250 @resource注解是通过名称扫描注入的. @autowire注解的扫描方 ...

  8. Java学习笔记之：Java数据类型的转换

    一.介绍 数据类型的转换,分为自动转换和强制转换.自动转换是程序在执行过程中“悄然”进行的转换,不需要用户提前声明,一般是从位数低的类型向位数高的类型转换:强制类型转换则必须在代码中声明,转换顺序不受 ...

  9. C++：对象的初始化和构造函数

    对象的初始化和构造函数 构造函数:是一种特殊的成员函数,它主要用于为对象分配空间,进行初始化.构造函数 的名字必须与类名相同,它不要用户来调用,而是在建立对象时自动执行的 形式一: 类名 对象名(实参 ...

  10. 8、SpringMVC源码分析（3）：分析ModelAndView的形成过程

    首先,我们还是从DispatcherServlet.doDispatch(HttpServletRequest request, HttpServletResponse response) throw ...