程序员scholar 程序员scholar
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • 微信小程序
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发效率资源包
    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 若依框架
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • Java 面经

    • Java基础
    • Java集合
    • Java并发
    • JVM面试题
    • MySQL面试题
    • Redis面试题
    • MQ面试题
    • Spring面试题
    • Mybatis面试题
    • Dubbo面试题
    • 分布式面试题
    • 操作系统面试题
    • 计算机网络面试题
    • 高频场景面试题
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • 微信小程序
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发效率资源包
    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 若依框架
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • Java 面经

    • Java基础
    • Java集合
    • Java并发
    • JVM面试题
    • MySQL面试题
    • Redis面试题
    • MQ面试题
    • Spring面试题
    • Mybatis面试题
    • Dubbo面试题
    • 分布式面试题
    • 操作系统面试题
    • 计算机网络面试题
    • 高频场景面试题
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
npm

(进入注册为作者充电)

  • CSS

    • CSS 基础语法
    • CSS 创建
    • CSS 选择器
    • CSS 分组和嵌套选择器
    • CSS 背景
    • CSS 文本格式
    • CSS 字体
    • CSS 链接
    • CSS 列表
    • CSS 表格
    • CSS 盒子模型
    • CSS 边框
    • CSS 轮廓
    • CSS margin(外边距)
    • CSS padding(填充)
    • CSS 尺寸 (Dimension)
    • CSS Display(显示)
    • CSS Position(定位)
    • CSS 布局 - Overflow
    • CSS Float(浮动)
      • CSS 对齐
      • CSS 伪类和伪元素
      • CSS 表单
      • CSS !important 规则
      • CSS flex布局
      • CSS技巧
      • 移动端适配
      • 移动端开发之流式布局
      • 移动端开发之 rem 布局
      • 移动端开发之响应式布局
    • CSS
    • CSS
    scholar
    2024-07-16
    目录

    CSS Float(浮动)

    # CSS Float(浮动)

    # 1. 什么是 CSS Float(浮动)

    image-20240229192311531

    • CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
    • Float(浮动),往往是用于图像,但它在布局时一样非常有用。

    # 2. 元素怎样浮动

    • 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
    • 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    • 浮动元素之后的元素将围绕它。
    • 浮动元素之前的元素将不会受到影响。
    • 如果图像是右浮动,下面的文本流将环绕在它左边:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title>
    <style>
    img {
        float: right; /* 使图片浮动到右侧 */
    }
    </style>
    </head>
    <body>
    
    <p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
    <p>
    <img src="logocss.gif" width="95" height="84" />
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    </p>
    </body>
    </html>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    image-20240229192359379

    # 3. 彼此相邻的浮动元素

    如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

    在这里,我们对图片廊使用 float 属性:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    .thumbnail {
        float: left; /* 使缩略图浮动到左侧 */
        width: 110px;
        height: 90px;
        margin: 5px; /* 设置缩略图之间的间距 */
    }
    </style>
    </head>
    <body>
    
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    
    </body>
    </html>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29

    image-20240229192433181

    # 4. 清除浮动 - 使用 clear

    元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

    clear 属性指定元素两侧不能出现浮动元素。

    使用 clear 属性往文本中添加图片廊:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    .thumbnail {
        float: left; /* 使缩略图浮动到左侧 */
        width: 110px;
        height: 90px;
        margin: 5px; /* 设置缩略图之间的间距 */
    }
    .text_line {
        clear: both; /* 清除左右两侧的浮动 */
        margin-bottom: 2px; /* 设置段落底部的间距 */
    }
    </style>
    </head>
    <body>
    
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    <h3 class="text_line">第二行</h3>
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    
    </body>
    </html>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34

    image-20240229192513899

    # 5. CSS 中所有的浮动属性

    image-20240229192537528

    # 6. 常见错误和改进

    • 确保 clear 属性用于需要避免被浮动元素包围的元素。
    • 在浮动布局中使用 clearfix 技术清除浮动,避免布局问题。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    .container::after {
        content: "";
        display: table;
        clear: both; /* 清除容器内部的浮动 */
    }
    .thumbnail {
        float: left; /* 使缩略图浮动到左侧 */
        width: 110px;
        height: 90px;
        margin: 5px; /* 设置缩略图之间的间距 */
    }
    </style>
    </head>
    <body>
    
    <div class="container">
        <h3>图片库</h3>
        <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
        <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
        <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
        <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
        <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
        <h3 class="text_line">第二行</h3>
        <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
        <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
        <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
        <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    </div>
    
    </body>
    </html>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37

    在上面的示例中,我们使用了 clearfix 技术清除浮动,以确保 .container 内部的浮动元素不会影响外部元素的布局。

    编辑此页 (opens new window)
    上次更新: 2024/12/28, 18:32:08
    CSS 布局 - Overflow
    CSS 对齐

    ← CSS 布局 - Overflow CSS 对齐→

    Theme by Vdoing | Copyright © 2019-2025 程序员scholar
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式