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

2024-01-02 08:35:34

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

属性：float 浮动

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

3、浮动的特点

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

注意点:

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

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

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

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

优点:
简单粗暴，方便

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

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;
}

如何垂直居中一个 <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。

垂直居中的方法

将显示方式设置为表格， display:table-cell ,同时设置 vertial-align:middle ;
使用 flex 布局，设置为 align-item: center;
绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto ;
绝对定位中固定高度时设置 top:50%，margin-top 值为高度一半的负值 ;
文本垂直居中设置 line-height 为 height 值。

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

文章来源:https://blog.csdn.net/qq_37255976/article/details/134424883
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！

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