float

预计阅读时间1 分 40 views

1 作用

float属性用于控制元素在其容器中的水平位置，使其能够靠左或靠右对齐，并且允许其他内容环绕在其周围。常用于创建多列布局或图文混排的效果。

2 语法

float属性的值可以是以下几种：

left：元素向左浮动。
right：元素向右浮动。
none：默认值，元素不浮动。
inherit：继承父元素的浮动值。

3 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Float Example</title>
    <style>
        .left {
            float: left; /* 元素向左浮动 */
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            margin-right: 10px; /* 右侧外边距用于展示其他内容环绕 */
        }

        .right {
            float: right; /* 元素向右浮动 */
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin-left: 10px; /* 左侧外边距用于展示其他内容环绕 */
        }

        .clear {
            clear: both; /* 清除浮动 */
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div> <!-- 清除浮动，确保下方内容不会被浮动元素遮盖 -->
    <p>这是一段文本，展示了如何使用float属性创建图文混排效果。</p>
</body>
</html>

float

1 作用

2 语法

3 示例

Leave a Comment 取消回复

float

内容