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

    http://poj.org/problem?id=1573 #include<stdio.h> #include<stdlib.h> #include<cstring& ...

  2. String类的使用 Part1

    String类的属性 1:Chars属性 获取当前 String 对象中位于指定位置的 Char 对象. 2:Length属性 获取当前 String 对象中的字符数. eg:获取字符串中  字母, ...

  3. Oracle 9 - 分析undo和snapshot too old错误

    什么操作会生成undo INSERT生成的UNDO最少,只要记录新的rowid UPDATE生成的undo多一点,它要记录修改前的数据中的那部分. DELETE生成最多的undo, 因为它要记录整行被 ...

  4. QAQ高精度模板笔记√

    #include <cmath> #include <cstdio> #include <cstring> #include <iostream> #i ...

  5. nslookup工具的使用方法

    配置好DNS服务器,添加了相应的记录之后,只要IP地址保持不变,一般情况下我们就不再需要去维护DNS的数据文件了.不过在确认域名解释正常之前我们最好是测试一下所有的配置是否正常.许多人会简单地使用pi ...

  6. Oracle配置详解

    [Oracle连接字符串][Oracle Net Manager 服务命名配置][PL/SQL 登陆数据库] 连接数据库的几个重要参数: 1. 登陆用户名:user: 2. 登录密码:password ...

  7. Android 类似时间轴的实现

    想要实现图片中的的时间轴的效果,设定了三种颜色,但是出来的只有一个黑色,还不是设定好的,而且长度很长的话不能滚动,下面上代码: 布局文件: <LinearLayout xmlns:android ...

  8. MySQL中REGEXP正则表达式使用大全

    REGEXP在mysql是用来执行正则表达式的一个函数 像php中的preg之类的函数了,regexp正则函数如果只是简单的查询使用like即可,但复杂的还是需要使用regexp了,下面我们来看看. ...

  9. Android布局详解之一：FrameLayout

      原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...

  10. LA 3357 (递推 找规律) Pinary

    n位不含前导零不含连续1的数共有fib(n)个,fib(n)为斐波那契数列. 所以可以预处理一下fib的前缀和,查找一下第n个数是k位数,然后再递归计算它是第k位数里的多少位. 举个例子,比如说要找第 ...