js浮动代码

JavaScript中的“浮动”通常指的是CSS中的浮动（float），而不是JavaScript本身的一个特性。CSS浮动是一种布局技术，它允许元素脱离正常的文档流，并向左或向右浮动，直到其边缘碰到包含框或另一个浮动元素的边缘为止。

基础概念

浮动（Float）：CSS属性，用于定义元素如何浮动以及向哪个方向浮动。
清除浮动（Clear）：用于阻止元素围绕浮动元素排列。

类型

left：元素向左浮动。
right：元素向右浮动。
none（默认）：元素不浮动。

应用场景

创建多列布局：通过浮动多个块级元素，可以创建并排显示的多列。
图像文字环绕：使图像浮动，可以让文字环绕在图像周围。

遇到的问题及解决方法

问题：父元素高度塌陷

当子元素浮动后，父元素可能会失去高度，导致高度塌陷。

解决方法：

设置父元素的overflow属性：
设置父元素的overflow属性：
使用伪元素清除浮动：
使用伪元素清除浮动：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Example</title>
    <style>
        .container {
            border: 2px solid black;
        }
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
            margin-right: 10px;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="float-left"></div>
        <div class="float-left"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

在这个例子中，.container 是父元素，包含两个浮动的子元素 .float-left。通过在父元素内部添加一个带有 clear: both 的 .clear 元素，可以防止父元素高度塌陷。