清除浮动的几种方式,各自的优缺点、如何垂直居中一个浮动元素?
属性:float 浮动
属性名 | 效果 |
---|---|
left | 左浮动 |
right | 右浮动 |
浮动的特点
- 浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
• 相当于从地面飘到了空中- 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
- 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果
• 一行可以显示多个
• 可以设置宽高
注意点:
• 浮动的元素不能通过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;
}
/**方法三:**/
.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 作者:星辰迷上大海