写文章
  1. 码农之家首页
  2. 前端教程

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

我心飞翔 • • 前端教程 • 阅读 0

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

属性：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

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

1、基本写法
.clearfix::after {
    content: '';
    display: block;
    clear: both;
 }       

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

3、加zoom写法
.clearfix {
  *zoom: 1;

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

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

4.伪元素清除法

方法:

 /* 清除浮动 */
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

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

优点:

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

5.给父元素设置overflow : hidden

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

优点:
方便

参考案例

<!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>

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

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

/**方法一: 已知元素的高宽**/
#div1{ 
	background-color:#6699FF; 
	width:200px; 
	height:200px;
	position: absolute;  //父元素需要相对定位
	top: 50%;
	left: 50%; 
	margin-top:-100px ;   //二分之一的height，width
	margin-left: -100px;
}

/**方法二:**/
#div1{
	width: 200px;
	height: 200px; 
	background-color: #6699FF; 
	margin:auto;
	position: absolute;  //父元素需要相对定位
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

/**方法三:**/
.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> ? (简便的方法)

/**<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。
<!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 值。
<!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 将元素向上移动一半高度实现垂直居中。根据具体布局需求选择合适的解决方案，并进行兼容性测试，以确保在各种浏览器和设备上都能正确显示。

原文链接：https://juejin.cn/post/7339887346433507364 作者：星辰迷上大海

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2024年2月27日 下午4:28
下一篇 2024年2月27日 下午4:38

相关推荐

发表回复

登录后才能评论