float页面布局

最新推荐文章于 2024-03-21 19:18:07 发布

原创最新推荐文章于 2024-03-21 19:18:07 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#float浮动

前端学习专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨了使用CSS float属性进行页面布局的方法，包括左浮动和右浮动的基本用法，以及如何通过清除浮动来解决边框塌陷的问题。通过具体代码示例，读者可以了解如何创建稳定的两栏布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
    <meta charset="UTF-8">
    <title>float页面布局</title>
    <style>
        *{
            margin: 0;
            height: 0;
        }
        .c1{
            height: 1000px;
            width: 20%;
            background: red;
            float: left;
        }
        .c2{
            height: 1000px;
            width: 80%;
            background: green;
            float: right;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>
</body>

float;left 往左漂浮
right 往右漂浮
如果有边框的会浮动会造成边框塌陷
#d1:after{
content: “”;
clear: left;
display: block;
}
引用第三个标签，清除浮动，固定住边框