为什么遮罩层不能使用float来实现，请大神看看我的代码有问题吗？

<!DOCTYPE html>

<html>

<head>

<title>CSS布局</title>

margin: 0;

padding:0;

}

.div1{

float:left;

width:380px;

height:240px;

background:#000;

opacity:0.3;

}

img{

width: 380px;

height: 240px;

}

</style>

</head>

<body>

<nav>

</nav>

<div>

</div>

</body>

</html>

<br>

慕粉1613498532 2018-05-19

源自：项目：网页布局案例 2-4 编程练习

收起

2回答

Miss路回答被采纳获得+3积分 2018-05-21 11:31:49

遮罩层是要完全脱离文档流才能实现的，而浮动不是完全脱离文档流的，浮动是不会脱离文本流的，比如，这样写就是可以遮住的：

但是如果你这么写，文本内容就会出来，不被遮盖：

这就是float的特性，盒子可以被遮盖，但是里面的内容遮不住。、

祝学习愉快！

收起回答

慕粉1613498532 提问者 #1

非常感谢！

2018-05-21 23:44:58

Miss路 2018-05-20 15:00:48

浮动本来就不是用来设置遮罩层的，当然实现的不对了。你设置了浮动之后两个块在一行显示，是不会重叠的。

正确的应该这么写：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">  
    <title>CSS布局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .pre{
            position: relative;
        }
        .div1{
            position: absolute;
            top: 0;
            left: 0;
            width:380px;
            height:240px;
            background:#000;
            opacity:0.5;
        }
        img{
            width: 380px;
            height: 240px;
        }
    </style>
</head>
<body>
<nav>
</nav>
    <div class="pre">
        <img src="http://img1.sycdn.imooc.com/climg//58f829ca00010be703840240.jpg">
        <div class="div1"></div>
    </div> 
</body>
</html>