首页 > 代码库 > css清除浮动的两种方式(clearfix和clear)

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=http://www.mamicode.com/"/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=http://www.mamicode.com/"/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——清除浮动》