清除“浮动”解决的案例

最新推荐文章于 2022-10-17 07:11:30 发布

weixin_41571206

最新推荐文章于 2022-10-17 07:11:30 发布

阅读量362

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_41571206/article/details/101029070

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

清除浮动解决的案例

- 代码
- 目的和思路

代码

<body>
<div class="box" >
 <div><img src="98269948f626683a1a74304aaf670a51_150_150.jpg" height="150" width="150"/></div>
<div><img src="580860808f522f43aa98df9142fe80b7_150_150.jpg" height="150" width="150"/></div>
<div><img src="2296832715cd9c303d8e2782c37a052b_150_150.jpg" height="150" width="150"/></div>
<div><img src="4365927439564a96ae1007c93c62f05d_150_150.png" height="150" width="150"/></div>
<div><img src="98269948f626683a1a74304aaf670a51_150_150.jpg" height="150" width="150"/></div>
<div><img src="580860808f522f43aa98df9142fe80b7_150_150.jpg" height="150" width="150"/></div>
<div><img src="2296832715cd9c303d8e2782c37a052b_150_150.jpg" height="150" width="150"/></div>
<div><img src="4365927439564a96ae1007c93c62f05d_150_150.png" height="150" width="150"/></div>
</div>
</body>

   <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box {
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            margin: 100px auto;

        }
        .box div {
            width: 155px;
            height: 155px;
            float: left;
            position: relative;
        }
        .img a img{
            width: 150px;
            height: 150px;
        }
        img:hover {
            position: absolute;
            left: -20px;
            top: -20px;
            width: 303px;
            height: 303px;
            margin-top: -25px;
            margin-left: -100px;
            z-index: 2;
        }


    </style>

目的和思路

这段代码是使用定位了（position）来实现鼠标所在的图片放大（上述的图片自行切换）
1.应为要使鼠标所在之处图片放大所以队选中的图片使用了position的absolute，又因为使用absolute会使元素脱离标准流（类似float），所以会导致当图片放大时，后面的图片会向前推移，所以在这里用

将包裹并将div设置宽高，使img放入已排好的框框里之间不影响，从而消除图片脱离标准流带来的影响浮动的影响以达到效果。