参考资料

  1. css阴影效果属性效果是什么
  2. flex-wrap: wrap/nowrap详细说明
  3. CSS有哪些常用的选择器？
  4. 有没有现成的Vanta.js与CSS过渡模板？
  5. css样式div居中
  6. 边框属性详细说明以及案例
  7. css怎么使div居中
  8. 目标伪类选择器详细说明以及案例

CSS浮动详细说明

浮动（Float） 是CSS中用于实现元素水平排列的一种布局方式。浮动的元素会脱离正常的文档流，向左或向右移动，直到碰到包含框或另一个浮动元素为止。

浮动的属性值

  • float: left;：元素向左浮动。

  • float: right;：元素向右浮动。

  • float: none;：默认值，元素不浮动。

  • float: inherit;：继承父元素的浮动属性。

浮动的特点

  1. 脱离文档流：浮动元素不再占据文档流中的空间，后续元素会紧随其后。

  2. 水平排列：浮动元素会在同一行内排列，直到空间不足时才会换行。

  3. 宽度自适应：浮动元素的宽度会根据内容自适应，除非显式设置宽度。

清除浮动

由于浮动元素脱离文档流，可能会影响后续元素的布局。常见的清除浮动的方法：

  1. clear: both;：在需要清除浮动的元素上设置，使其不与任何浮动元素相邻。

  2. 父容器使用 overflow: hidden;：强制父容器包含浮动元素。

  3. 使用 ::after 伪元素：在父容器上添加 ::after 伪元素，并设置 clear: both;。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS浮动案例</title>
    <style>
        .container {
            width: 300px;
            border: 1px solid #000;
            overflow: hidden; /* 清除浮动 */
        }
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
            float: left; /* 向左浮动 */
        }
        .clear {
            clear: both; /* 清除浮动 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="clear"></div> <!-- 清除浮动 -->
    </div>
    <p>这是一个普通段落，浮动元素不会影响它。</p>
</body>
</html>

解释

  1. .container：包含三个浮动元素的容器，使用 overflow: hidden; 清除浮动。

  2. .box：每个盒子都设置了 float: left;，因此它们会水平排列。

  3. .clear：空的 div 元素用于清除浮动，确保容器正常包含浮动元素。

  4. <p>：普通段落，不受浮动元素影响。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。