设置float浮动无效

最新推荐文章于 2024-04-26 09:22:03 发布

Robin_Hood_

最新推荐文章于 2024-04-26 09:22:03 发布

阅读量6.3k

点赞数 2

分类专栏：前端问题

本文链接：https://blog.youkuaiyun.com/Rocarrot/article/details/80948340

版权

前端问题专栏收录该内容

8 篇文章

订阅专栏

一、问题描述

在做瀑布流的时候设定给div设定float：left 发现无效。原代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{

        }
        .box{
            padding-top: 10px;
            padding-left: 10px;
            box-sizing: border-box;
            margin: 0 50px auto;
            width: 100px;
        }
        .board>img{
            width: 200px;
        }
        .board{
            float: left;
            padding: 10px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            margin-left: 15px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="box">
        <div class="board"><img src="images/img01.jpg" alt=""></div>
        <div class="board"><img src="images/img02.jpg" alt=""></div>
        <div class="board"><img src="images/img03.jpg" alt=""></div>
        <div class="board"><img src="images/img04.jpg" alt=""></div>
        <div class="board"><img src="images/img05.jpg" alt=""></div>
        <div class="board"><img src="images/img06.jpg" alt=""></div>
        <div class="board"><img src="images/img07.jpg" alt=""></div>
        <div class="board"><img src="images/img08.jpg" alt=""></div>
        <div class="board"><img src="images/img01.jpg" alt=""></div>
        <div class="board"><img src="images/img02.jpg" alt=""></div>
        <div class="board"><img src="images/img03.jpg" alt=""></div>
        <div class="board"><img src="images/img04.jpg" alt=""></div>
        <div class="board"><img src="images/img05.jpg" alt=""></div>
        <div class="board"><img src="images/img06.jpg" alt=""></div>
        <div class="board"><img src="images/img07.jpg" alt=""></div>
        <div class="board"><img src="images/img08.jpg" alt=""></div>

    </div>
</div>
</body>
</html>

效果：

二、解决方案

其实并不是设定无效，而是给父盒子 .box 设置边框小于.board的宽度，导致无法在同一行，由于原来就是上下布局，所以没看出来差别以为是设定无效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            
        }
        .box{
            padding-top: 10px;
            padding-left: 10px;
            box-sizing: border-box;
            margin: 0 50px auto;
        }
        .board>img{
            width: 200px;
        }
        .board{
            float: left;
            padding: 10px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            margin-left: 15px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="box">
        <div class="board"><img src="images/img01.jpg" alt=""></div>
        <div class="board"><img src="images/img02.jpg" alt=""></div>
        <div class="board"><img src="images/img03.jpg" alt=""></div>
        <div class="board"><img src="images/img04.jpg" alt=""></div>
        <div class="board"><img src="images/img05.jpg" alt=""></div>
        <div class="board"><img src="images/img06.jpg" alt=""></div>
        <div class="board"><img src="images/img07.jpg" alt=""></div>
        <div class="board"><img src="images/img08.jpg" alt=""></div>
        <div class="board"><img src="images/img01.jpg" alt=""></div>
        <div class="board"><img src="images/img02.jpg" alt=""></div>
        <div class="board"><img src="images/img03.jpg" alt=""></div>
        <div class="board"><img src="images/img04.jpg" alt=""></div>
        <div class="board"><img src="images/img05.jpg" alt=""></div>
        <div class="board"><img src="images/img06.jpg" alt=""></div>
        <div class="board"><img src="images/img07.jpg" alt=""></div>
        <div class="board"><img src="images/img08.jpg" alt=""></div>

    </div>
</div>
</body>
</html>

去掉对.box宽度设定后：