最近总是在用浮动，这两种方式总是浮现在眼前，或者说去掉父级和同级浮动样式总在思考中。两种方式怎么写都在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. android 解析XML方式（二）

    上一节中,我们使用DOM方式解析xml文档,该方式比较符合我们日常思维方式,容易上手,但是它直接把文档调入内存中,比较耗内存.在这里我们可以用另外一种方式解析xml,这个就是SAX方式. SAX即是: ...

  2. Unity3d Detect NetState

    public static bool HasConnection() { System.Net.WebClient client; System.IO.Stream stream; try { usi ...

  3. Building Plugins for iOS

    This page describes Native Code Plugins for the iOS platform. Building an Application with a Native ...

  4. Create a method synchronized without using synchronized keyword

    Actually, lots of ways: No need for synchronization at all if you don't have mutable state. No need ...

  5. POJ1222 高斯消元法解抑或方程

    第一次学怎么用高斯消元法解抑或方程组,思想其实很简单,方法可以看下面的链接:http://blog.csdn.net/zhuichao001/article/details/5440843 有了这种思 ...

  6. 2010年山东省第一届ACM大学生程序设计竞赛 Balloons (BFS)

    题意 : 找联通块的个数,Saya定义两个相连是 |xa-xb| + |ya-yb| ≤ 1 ,但是Kudo定义的相连是 |xa-xb|≤1 并且 |ya-yb|≤1.输出按照两种方式数的联通块的各数 ...

  7. JSP include标签和include指令

    test1.jsp <% int a = 5; out.println(a); %> test2.jsp <jsp:include page="/test1.jsp&quo ...

  8. docker: "build" requires 1 argument. See 'docker build --help'.

    http://bbs.csdn.net/topics/391040030 docker build  --tag="ouruser/sinatra:v3" -<Dockerf ...

  9. 规范化ProjectEuler

    Euler Level3 规范化程序: 包名:LevelX,X是等级 每题程序名:PE0xx.java,PE0xx.py 程序有必要的注释,不同方法运行结果也在程序中 规范化博文: 名字:Projec ...

  10. XE2编译出来的DLL的DLLMain的退出地方用到了halt0

    DelphiXE2内存加模块升级版.支持32位和64位模块. 已转至新的博客 http://www.raysoftware.cn/?p=51 很多年以前写过内存加载DLL的一片技术. http://b ...