0411-39943997
工作时间:周一至周日 8:30-17:30
技术文库
Technical Library

前端 "clearfix"做什么用的

标签: clearfix   访问: 26562021-09-03

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开。

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

<!DOCTYPE HTML>
<html>
<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>
        <div class="fl item1"></div>
        <div class="fl item2"></div>
        <div></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 就要放在最后。


Copyright© 2020 仟亿科技,All rights reserved.