浮动
一.传统网页布局
分为三种:标准流,浮动,定位
二.标准流(问题)
标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
常见标准流排版规则:
块级元素:从上往下,垂直布局,独占一行
行内元素或行内块元素:从左往右,水平布局,空间不够自动折行
但标签换行会使得行内元素或者行内块元素之间出现空隙,示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: inline-block;
}
.one {
width: 211px;
height: 211px;
background-color: pink;
}
.two {
width: 211px;
height: 211px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
效果:
倘若标签不换行的话会使得代码看起来杂乱无章,所以这里使用浮动解决问题。
三.浮动
1.体验浮动
浮动属性为float ,用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:
选择器 { float: 属性值;}
早期的作用是文字围绕,现在大多用来进行网页布局
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 111px;
height: 111px;
}
/* 现在用来网页布局 */
.one {
float: left;
background-color: aqua;
}
.two {
background-color: pink;
/* float: right; */
float: left;
}
</style>
</head>
<body>
<div class="one">111</div>
<div class="two">222</div>
</body>
</html>
效果如下:
这样解决了上述标签换行带来的影响。
2.浮动的特点
浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
浮动元素比标准流高半个级别,可以覆盖标准流中的元素
浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动,可以理解为脱标之间的内容相互占位置
浮动元素有特殊的显示效果:
- 一行可以显示多个
- 可以设置宽高
示例:
<style>
/* 浮动的标签 顶对齐 */
/* 浮动:在一行排列,宽高生效--浮动的标签具备行内块特点 */
.one {
width: 111px;
height: 111px;
background-color: orange;
float: left;
margin-top: 55px;
}
.two {
width: 222px;
height: 222px;
background-color: skyblue;
float: left;
}
.three {
width: 333px;
height: 333px;
background-color: pink;
}
</style>
3.浮动带来的问题
父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面的位置(即子级浮动的位置)
一般父级不设高度是为了存放可变内容,由内容去撑开高度
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 888px;
/* height: 333px; */
background-color: pink;
}
.left {
float: left;
width: 222px;
height: 333px;
background-color: skyblue;
}
.right {
float: right;
width: 600px;
height: 333px;
background-color: orange;
}
.bottom {
height: 222px;
background-color: green;
}
</style>
</head>
<body>
<!-- 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面的位置(即子级浮动的位置) -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
</html>
效果如下:
为解决该问题,我们需清除浮动带来的问题
4.清除浮动
含义:清除浮动带来的问题
原因:子元素浮动后脱标一不占位置
4.1.父元素设高
给父元素设置高度,从而不影响其他网页元素的布局(此方法不常用)
4.2.额外标签法
操作:1.元素内容的个块级元素
2.给添加的块级元素设置clear:both
缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 888px;
/* height: 333px; */
background-color: pink;
}
.left {
float: left;
width: 222px;
height: 333px;
background-color: skyblue;
}
.right {
float: right;
width: 600px;
height: 333px;
background-color: orange;
}
.bottom {
height: 222px;
background-color: green;
}
.clearfix {
clear:both;
}
</style>
</head>
<body>
<!-- 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面的位置(即子级浮动的位置) -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
</html>
效果:
4.3.单伪元素清除法
操作:用伪元素替代了额外标签
写法:
/* 单伪元素清除法 /
.clearfix::after {
content: ‘’;
/ 伪元素添加的标签是行内,要求块 /
display: block;
clear: both;
/ 为了兼容性 */
height: 0;
visibility: hidden;
}
优点:项目中使用,直接给标签加类即可清除浮动
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 888px;
/* height: 333px; */
background-color: pink;
}
.left {
float: left;
width: 222px;
height: 333px;
background-color: skyblue;
}
.right {
float: right;
width: 600px;
height: 333px;
background-color: orange;
}
.bottom {
height: 222px;
background-color: green;
}
/* 单伪元素清除法 */
.clearfix::after {
content: '';
/* 伪元素添加的标签是行内,要求块 */
display: block;
clear: both;
/* 为了兼容性 */
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<!-- 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面的位置(即子级浮动的位置) -->
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
<!-- 通过css添加标签 -->
</div>
<div class="bottom"></div>
</body>
</html>
效果同上。
4.4.双伪元素清除法(常用)
写法:
.clearfix::before,
.clearfix::after {
content: ‘’;
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
clear: both;
}
优点:项目中使用,直接给标签加类即可清除浮动,还可解决外边距塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 888px;
/* height: 333px; */
background-color: pink;
}
.left {
float: left;
width: 222px;
height: 333px;
background-color: skyblue;
}
.right {
float: right;
width: 600px;
height: 333px;
background-color: orange;
}
.bottom {
height: 222px;
background-color: green;
}
/* .clearfix::before作用:解决外边距塌陷问题
外边距塌陷:父子级标签,都是块级,子级加margin标签会影响父级的位置
*/
/* 清除浮动(也可解决外边距塌陷问题) */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
clear: both;
}
</style>
</head>
<body>
<!-- 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面的位置(即子级浮动的位置) -->
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
效果同上。
4.5.overflow清除法
操作:直接给父元素设置 overflow: hidden
优点:方便
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 888px;
/* height: 333px; */
background-color: pink;
/* 清除浮动-给父元素添加overflow */
overflow: hidden;
}
.left {
float: left;
width: 222px;
height: 333px;
background-color: skyblue;
}
.right {
float: right;
width: 600px;
height: 333px;
background-color: orange;
}
.bottom {
height: 222px;
background-color: green;
}
</style>
</head>
<body>
<!-- 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面的位置(即子级浮动的位置) -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
效果同上。