清除浮动的几种方式，各自的优缺点、如何垂直居中一个浮动元素? 水平居中的方法、垂直居中的方法？

星辰迷上大海2024-02-27 13:56

清除浮动的几种方式，各自的优缺点、如何垂直居中一个浮动元素?

属性：float 浮动

属性名 效果
left 左浮动
right 右浮动

浮动的特点

  1. 浮动元素会脱离标准流(简称:脱标)，在标准流中不占位置
    • 相当于从地面飘到了空中
  2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
  3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
  4. 浮动元素有特殊的显示效果 • 一行可以显示多个 • 可以设置宽高

注意点:

• 浮动的元素不能通过text-align:center或者margin:0 auto

浮动的框可以向左或向右移动， 直到他的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一 样 。浮动的块框会漂浮在文档普通流的块框上。

1.直接设置浮动父元素高度 height

优点: 简单粗暴，方便

缺点: 有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

2.额外标签法

方法:

  1. 在父元素内容的最后添加一个块级元素
  2. 给添加的块级元素设置 clear:both clear 清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式： {clear:both;height:0;overflow:hidden;}

缺点: 会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3.单伪元素清除法 :after 和 zoom

方法: 用伪元素替代了额外标签

css 复制代码 
1、基本写法
.clearfix::after {
    content: '';
    display: block;
    clear: both;
 }
css 复制代码 
2、补充写法
.clearfix::after {
    content: '';
    display: block;
    clear: both;
    /* 补充代码：在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}
css 复制代码 
3、加zoom写法
.clearfix {
  *zoom: 1;

  &::after {
    clear: both;
    content: '.';
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
  }
}

优点: 项目中使用，直接给标签加类即可清除浮动

4.伪元素清除法

方法:

html 复制代码 
 /* 清除浮动 */
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

/* 真正清除浮动的标签 */
.clearfix::after {
    clear: both;
}

优点:

项目中使用，直接给标签加类即可清除浮动

5.给父元素设置overflow : hidden

方法: 直接给父元素设置 overflow : hidden

优点: 方便

参考案例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;

            overflow: hidden;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

运行结果：

如何垂直居中一个浮动元素?

css 复制代码 
/**方法一: 已知元素的高宽**/
#div1{ 
	background-color:#6699FF; 
	width:200px; 
	height:200px;
	position: absolute;  //父元素需要相对定位
	top: 50%;
	left: 50%; 
	margin-top:-100px ;   //二分之一的height，width
	margin-left: -100px;
}
css 复制代码 
/**方法二:**/
#div1{
	width: 200px;
	height: 200px; 
	background-color: #6699FF; 
	margin:auto;
	position: absolute;  //父元素需要相对定位
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
css 复制代码 
/**方法三:**/
.container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
}

.box {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  border: 1px solid #333;
  text-align: center;
}

如何垂直居中一个 <img> ? (简便的方法)

css 复制代码 
/**<img>的容器设置如下**/
#container  {
   display:table-cell;
   text-align:center;
   vertical-align:middle;
}

水平居中的方法

  • 元素为行内元素，设置父元素 text-align:center ;
  • 如果元素宽度固定， 可以设置左右 margin 为 auto ;
  • 如果元素为绝对定位，设置父元素 position 为 relative ，元素设 left:0;right:0;margin:auto;
  • 使用 flex-box 布局，指定 justify-content 属性为center;
  • display 设置为 tabel-ceil。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>水平居中的方法</title>
    <style>
      /* 通用样式 */
      .container {
        border: 1px solid #ccc;
        margin-bottom: 20px;
        text-align: center;
      }

      /* 行内元素使用 text-align */
      .text-align-center .content {
        display: inline-block;
      }

      /* 固定宽度元素使用 margin: auto */
      .margin-auto .content-fixed-width {
        width: 200px; /* Example fixed width */
        margin: 0 auto;
      }

      /* 绝对定位元素使用相对定位 */
      .absolute-positioning {
        position: relative;
      }

      .absolute-positioning .content-absolute {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
      }

      /* Flexbox 布局 */
      .flexbox-method {
        display: flex;
        justify-content: center;
      }

      /* 表格单元格显示方法 */
      .table-cell-method {
        display: table;
      }

      .table-cell-method .content-table-cell {
        display: table-cell;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container text-align-center">
      <span class="content">行内元素使用 text-align：通过设置父元素的 text-align: center，内联元素可以水平居中。</span>
    </div>

    <div class="container margin-auto">
      <div class="content-fixed-width">固定宽度元素使用 margin: auto：当元素有固定宽度时，可以通过设置左右 margin 为 auto 来实现水平居中。</div>
    </div>

    <div class="container absolute-positioning">
      <div class="content-absolute">绝对定位元素使用相对定位：将父元素设置为 position: relative，子元素设置为 position: absolute; left: 0; right: 0; margin: auto; 实现水平居中。</div>
    </div>

    <div class="container flexbox-method">
      <div class="content-flexbox">Flexbox 布局：使用 display: flex 并指定 justify-content: center 属性来实现水平居中。</div>
    </div>

    <div class="container table-cell-method">
      <div class="content-table-cell">表格单元格显示方法：通过将容器设置为 display: table，内容设置为 display: table-cell 实现水平居中。</div>
    </div>
    <div>
      在使用绝对定位方法时，需要确保父元素的定位状态是相对定位，以便让绝对定位的子元素相对于其定位。 行内元素使用 text-align 方法时，需要将内联元素转换为块级元素或者内联块级元素，以便使其受到
      text-align 的影响。 这些方法提供了多种途径来实现水平居中，每种方法都有其适用的场景。在实际应用中，根据具体布局需求选择最合适的方法，并进行兼容性测试，以确保在各种浏览器和设备上都能正确显示。
    </div>
  </body>
</html>

垂直居中的方法

  • 将显示方式设置为表格， display:table-cell ,同时设置 vertial-align:middle ;
  • 使用 flex 布局，设置为 align-item: center;
  • 绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto ;
  • 绝对定位中固定高度时设置 top:50%，margin-top 值为高度一半的负值 ;
  • 文本垂直居中设置 line-height 为 height 值。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>垂直居中的方法</title>
    <style>
      /* 通用样式 */
      .container {
        height: 200px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .content {
        text-align: center;
      }

      /* 表格显示方式 */
      .table-method {
        display: table;
      }

      .table-method .content {
        display: table-cell;
        vertical-align: middle;
      }

      /* Flex 布局 */
      .flex-method {
        display: flex;
      }

      .flex-method .content {
        align-items: center;
      }

      /* 绝对定位 */
      .absolute-method {
        position: relative;
      }

      .absolute-method .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      /* 文本垂直居中 */
      .text-vertical-center {
        line-height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container table-method">
      <div class="content">表格显示方式：使用 display: table 和 display: table-cell 实现垂直居中，同时设置 vertical-align: middle。</div>
    </div>

    <div class="container flex-method">
      <div class="content">Flex 布局：使用 display: flex 并设置 align-items: center 实现垂直居中。</div>
    </div>

    <div class="container absolute-method">
      <div class="content">通过相对定位的容器和绝对定位的内容实现垂直居中，设置 top: 50% 和 transform: translateY(-50%)。</div>
    </div>

    <div class="container text-vertical-center">文本垂直居中：通过设置文本的 line-height 为容器的高度来实现垂直居中。</div>

    <div>
      不同方法适用于不同场景，需要根据具体布局需求选择合适的方法。 绝对定位方法中，需要考虑父容器的定位状态，以及元素自身的尺寸。
      在使用文本垂直居中时，需要确保文本内容不会超出容器高度，否则可能会导致显示问题。
      以上是几种常见的垂直居中方法，它们可以单独或结合使用，具体取决于布局需求。在实际开发中，根据具体情况选择最合适的方法，并进行兼容性测试，以确保在各种浏览器和设备上都能正确显示。
    </div>
  </body>
</html>

持续学习总结记录中，回顾一下上面的内容： 清除浮动的几种方式，各自的优缺点、如何垂直居中一个浮动元素?如何垂直居中一个 <img> ? 水平居中的方法、垂直居中的方法？

总结

清除浮动的方式有直接设置浮动父元素高度 height、额外标签法、单伪元素清除法 :after 和 zoom 、伪元素清除法，各有优缺点；垂直居中浮动元素可以使用 Flexbox 布局实现；垂直居中一个 <img> 可以使用 CSS 的 vertical-align 属性；水平居中的方法 ：可以使用 text-align 属性将行内元素水平居中，或将块级元素设置为 display: inline-block，然后使用 text-align: center 实现水平居中。垂直居中的方法 ：可以使用 Flexbox 布局，将父元素设置为 Flex 容器，使用 justify-content: center 和 align-items: center 实现垂直居中；或使用绝对定位，将元素设置为 top: 50%，然后使用负的 margin-top 将元素向上移动一半高度实现垂直居中。根据具体布局需求选择合适的解决方案，并进行兼容性测试，以确保在各种浏览器和设备上都能正确显示。

相关推荐
咖啡の猫22 分钟前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲3 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5813 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路3 小时前
GeoTools 读取影像元数据
前端
ssshooter4 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry5 小时前
Jetpack Compose 中的状态
前端
dae bal5 小时前
关于RSA和AES加密
前端·vue.js
柳杉5 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog6 小时前
低端设备加载webp ANR
前端·算法
LKAI.6 小时前
传统方式部署（RuoYi-Cloud）微服务
java·linux·前端·后端·微服务·node.js·ruoyi
热门推荐
01UV安装并设置国内源02蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04KGG转MP3工具|非KGM文件|解密音频05【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）062025最新国内服务器可用docker源仓库地址大全（2025年8月更新）07TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！10TRAE Rules 实践：为项目配置 6A 工作流