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

2024-01-02 08:35:34

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

属性:float 浮动

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

3、浮动的特点

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

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

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

水平居中的方法

  • 元素为行内元素,设置父元素 text-align:center ;
  • 如果元素宽度固定, 可以设置左右 margin auto ;
  • 如果元素为绝对定位,设置父元素 positionrelative ,元素设
    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-heightheight 值。

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

文章来源:https://blog.csdn.net/qq_37255976/article/details/134424883
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。