浮动
概要
行内块元素问题
行内块元素中间有缝隙
多个盒子纵向排列，用标准流最合适
多个盒子横向排列，应用浮动(不会有间隙)
html
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
/* float: left; */
}
</style>
</head>
<body>
<!-- 多个盒子纵向排列，用标准流最合适 -->
<!-- 多个盒子横向排列，应用浮动 -->
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
为什么需要浮动
完成标准流不能完成的横向排列
html
<!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>
.left,
.right {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="left">左青龙</div>
<div class="right">右白虎</div>
</body>
</html>
浮动的排列特性
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
div {
/* none:默认不浮动 left 向左浮动 right 向右浮动 */
float: left;
}
1.浮动元素会脱离标准流
1.脱离标准流得控制(浮)移动到指定位置(动)(俗称脱标)
2.浮动的盒子不再保留原来的位置
2.浮动元素会一行内显示并且元素顶部对齐
3.浮动元素会具有行内块元素得特性
脱标
浮动盒子一行显示
行内块特性
浮动元素搭配标准流1
浮动元素搭配标准流2
浮动元素搭配标准流3
<!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>
.box1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: rgb(0, 153, 255);
}
</style>
</head>
<body>
<div class="box1">浮动的盒子</div>
<div class="box2">标准流的盒子</div>
</body>
</html>
<!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>
div {
float: left;
width: 80px;
height: 80px;
background-color: pink;
}
.two {
background-color: purple;
height: 100px;
}
.four {
background-color: skyblue;
}
</style>
</head>
<body>
<div>1</div>
<div class="two">2</div>
<div>3</div>
<div class="four">4</div>
</body>
</html>
<!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>
span,
div {
float: left;
width: 200px;
height: 100px;
background-color: pink;
}
/* 行内元素有了浮动，则不需要转换块级/行内块元素 */
/* 块级元素没有设置宽度，跟父级一样宽，但设置浮动后，大小根据内容来定 */
p {
float: right;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<span>1</span>
<span>2</span>
<div>div</div>
<p>ppppp</p>
</body>
</html>
<!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>
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 230px;
height: 460px;
background-color: purple;
}
.right {
float: left;
width: 970px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
width: 296px;
height: 285px;
background-color: purple;
float: left;
margin-right: 14px;
}
.box .last {
margin-right: 0;
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 615px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 615px;
background-color: purple;
}
.right {
float: left;
width: 992px;
height: 615px;
background-color: skyblue;
}
.right > div {
float: left;
width: 234px;
height: 300px;
margin-left: 14px;
background-color: pink;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左青龙</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
</html>
能够说出为什么要清除浮动
由于父盒子很多情况下不方便给高度，但是盒子浮动又不占用位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子
清除浮动的本质就是清除浮动元素造成的影响
清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流
div {
/* left:清除左侧浮动 right:清除右侧浮动 both:同时清除两侧浮动的影响 */
clear: xxx;
}
清除浮动策略：闭合浮动
清除浮动方法
1.额外标签法，也称隔墙法，w3c 推荐 2.父级添加 overflow 3.父级添加 after 伪元素 4.父级添加双伪元素
额外标签法
父级添加 overflow
父级添加 after 伪元素
父级添加双伪元素
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
border-style: solid;
border-color: blue;
margin: 0 auto;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
/* 优点：通俗易懂，书写方便 */
/* 缺点：添加许多无意义标签，结构化较差 */
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="clear"></div>
<!-- 这个新增的盒子必须是块级元素，不能是行内元素 -->
<!-- <span class="clear"></span> -->
<!-- <div class="sanmao">三毛</div> -->
</div>
<div class="footer"></div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
.box {
/* 清除浮动： 优点：代码简洁 缺点：无法显示溢出部分 */
overflow: hidden;
width: 600px;
border-width: 1px;
border-style: solid;
border-color: blue;
margin: 0 auto;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6/7专用 */
*zoom: 1;
}
.box {
border-width: 1px;
border-style: solid;
border-color: blue;
margin: 0 auto;
width: 600px;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
/* IE6/7专用 */
*zoom: 1;
}
.box {
border-width: 1px;
border-style: solid;
border-color: blue;
margin: 0 auto;
width: 600px;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>
传统网页布局 3 种方式
1.普通流(普通流/文档流)
2.浮动
浮动盒子只会影响到后面的标准流
3.定位
常见网页布局
PS 切图
图层切图
- 右击图层，快速导出为 PNG 格式
- 如果多个图层组成一个，需要 ctrl + E 合并为一个图层再导出
切片切图
使用切片工具
选择需要导出的区域，另存为要选择选中的切片
切片调整 *使用后直接鼠标编辑 或用切片选择工具修改位置
使用完后 delete 删除切片