求解设置float之后，各元素之间有缝隙？

最新推荐文章于 2022-06-30 15:56:29 发布

原创最新推荐文章于 2022-06-30 15:56:29 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了一种使用CSS的浮动属性进行元素布局的方法。通过一个具体的HTML页面实例，展示了如何利用浮动属性使多个相同宽度和高度的红色矩形块在黑色背景容器中水平排列。此方法对于初学者理解CSS布局机制非常有帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            overflow: hidden;
            background: black;
        }
        .red {
            width: 150px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>
</div>
</body>
</html>