class="clearfix"是什么?

 分类:div+css教程时间:2015-11-01 14:53:31点击:

     清除浮动都用clear: both;class="clearfix"是什么呢?class="clearfix"是用来清除偏移量和层之间控制位置用的,看下例子:

<!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 就要放在最后。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: