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

    直接枚举计算就行: #include<cstdio> #include<cstring> #include<algorithm> #define maxn 22 u ...

  2. object-c 入门基础篇

    原地址:http://www.cnblogs.com/moonvan/archive/2011/10/13/2210498.html 一.Objective-C与C的渊源 Objective-C诞生于 ...

  3. [转]SQL Server建立应用程序安全性和程序角色

    转自:http://dev.yesky.com/450/7619450.shtml 2007-10-22 14:00 来源:论坛整理 作者:luolina 责任编辑:幽灵·yesky Microsof ...

  4. 搭建网站 discuzx ecshop php

    1.http://www.comsenz.com/downloads/install/discuzx下载

  5. [转]数据结构之Trie树

    1. 概述 Trie树,又称字典树,单词查找树或者前缀树,是一种用于快速检索的多叉树结构,如英文字母的字典树是一个26叉树,数字的字典树是一个10叉树. Trie一词来自retrieve,发音为/tr ...

  6. untiy 插件工具： 游戏中 策划数据Excel 导出到项目中

    https://github.com/zhutaorun/Excel2Unity,这个项目是直接下载就可以用的, 其中原理和相关的解释 http://blog.csdn.net/neil3d/arti ...

  7. *[hackerrank]Lexicographic paths

    https://www.hackerrank.com/contests/w9/challenges/lexicographic-steps 这题还是折腾很久的.题目意思相当于,比如有两个1两个0,那么 ...

  8. [mock]8月8日

    第一题是整数的方阵,求其中的子方阵,和最大.返回最大和以及子方阵宽度.因为做了topcoder的题,所以比较顺手,O(n^3)的复杂度. pair<int,int> maxiSum(vec ...

  9. 【Linux高频命令专题(6)】mkdir

    简述 用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录. 命令格式 mkdir [选项] 目录... 命令参数 -m, --mode=模式 ...

  10. springmvc文件上传2中方法

    基于前面文章的基础上. 一.准备 需要的jar  二.配置 1.  spmvc-servlet.xml <?xml version="1.0" encoding=" ...