文章目录
13 浮动 float:none|left|right;
传统PC端网页布局(摆盒子)的三种方式:
-
标准流(普通流):标签按照规定好默认方式排列(最基本的布局方式)
- 块级元素独占一行,从上到下顺序排列
- 行内元素会按照顺序,从左到右顺序排列,碰到父类元素边缘则自动换行。
-
浮动:可以改变元素标签默认的排列方式
典型应用:让多个块级元素一行内排列显示 -
定位
网页布局的第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
float属性:用于创建浮动框,将其移动到一边,直到左边缘/右边缘/另一个浮动框的边缘(贴在一起)
float:none(默认) | left | right;
13.1 浮动特性
1.浮动元素会脱离标准流(脱标)
2.浮动的元素会一行内显示并且元素顶部对齐(对齐)
3.浮动的元素会具有行内块元素的特性
13.1.1 脱标
给盒子浮动属性后,原来的盒子会脱离标准流的控制,不再属于普通的盒子。
- 脱离标准流(浮)的浮动盒子移动到指定位置(动)
- 浮动的盒子不再保留预先的位置
<!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>
.fudong{
width: 300px;
height: 300px;
background-color: aqua;
float: left; 加入浮动
}
.putong{
width: 500px;
height: 500px;
background-color: brown;
}
</style>
</head>
<body>
<div class="fudong">我是一个浮动的盒子</div>
<div class="putong">我是一个标准流的盒子</div>
</body>
</html>
现在我们给上面蓝色盒子浮动属性后:
![image-20230705162001593](https://i-blog.csdnimg.cn/blog_migrate/a6ff6b3198ce627285ccd5a4c2af3a6a.png)
原来的蓝色盒子会移动到浮动的位置,然后**“浮起来”**,原来的位置就不再存在了,后面的标准流的盒子会占据这个位置。
加上浮动,相当于就是网页有两层,上面一层浮在网页1 上。
13.1.2 对齐
<!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>
.fudong{
width: 300px;
height: 300px;
background-color: aqua;
float: left;
}
.putong{
width: 500px;
height: 500px;
background-color: brown;
float: left;
}
.fong{
width: 400px;
height: 400px;
background-color: black;
float: left;
}
</style>
</head>
<body>
<div class="fudong"></div>
<div class="putong"></div>
<div class="fong"></div>
</body>
</html>
设置了三个不同大小的盒子,都给浮动属性。那么这三个盒子会在上边缘对齐,一行显示,没有缝隙
![image-20230705162312332](https://i-blog.csdnimg.cn/blog_migrate/02a2bbda48a800ffe14ce116a98d0fc1.png)
如果一行装不下所有的浮动盒子,那么装不下的盒子会自动移到第二行。
13.1.3 行内块元素特性
13.1.3.1 行内元素→行内块元素
<!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{
float: left;
}
.hangnei1{
width: 100px;
height: 100px;
background-color: aqua;
}
.hangnei2{
width: 100px;
height: 100px;
background-color: bisque;
}
</style>
</head>
<body>
<span class="hangnei1">行内元素1</span>
<span class="hangnei2">行内元素2</span>
</body>
</html>
![image-20230705162831588](https://i-blog.csdnimg.cn/blog_migrate/a0858b5503767e251f2ca15a1bc4c87d.png)
行内元素<span>
通过添加浮动
,具有了行内块元素设置宽、高
的特性
13.1.3.2 块元素→行内块元素
块元素<P>
也具有行内块元素的特性:如果没有指定高宽,那么就通过里面内容长度需要的高宽来确定
<!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>
p {
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<p>我是一个块级元素</p>
</body>
</html>
![image-20230705163311522](https://i-blog.csdnimg.cn/blog_migrate/8bc2d65fa13269d5ceacf5756a60c080.png)
13.2 布局的原则
为了约束浮动元素位置,网页一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则
<!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: 120px;
height: 46px;
background-color: pink;
margin: 0,auto; 后面left盒子和right盒子对齐都以这个大盒子box为准
}
.left{
float: left;
width: 23px;
height: 46px;
background-color: purple; 在大盒子里左浮动对齐
}
.right{
float: left;
width: 97px;
height: 46px;
background-color: skyblue; 在大盒子里左浮动对齐
}
</style>
</head>
<body>
<div class="box">
<div class="left">左侧</div> 在大盒子里定义小盒子
<div class="right">右侧</div>
</div>
</body>
</html>
![image-20230705164827445](https://i-blog.csdnimg.cn/blog_migrate/cd3510500ee232ddc552a161c05717c3.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动元素搭配标准流父盒子2</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none; /* 去掉li前面的小圆点 */
}
.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 要注意权重的问题 20 */
.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>
在粉色的大盒子里面布置4个小盒子:
![image-20230705170049443](https://i-blog.csdnimg.cn/blog_migrate/102c17d847045fde8685a22895a2b543.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常见网页布局</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 150px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
margin: 0 auto;
height: 300px;
background-color: pink;
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: gray;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
/* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
.footer {
height: 200px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
![image-20230705171734919](https://i-blog.csdnimg.cn/blog_migrate/dfb500a4e6ac6fe1ab99e62aa4bdd946.png)
13.3 清除浮动 clear: both;
由于在很多情况下,父级盒子不方便给高度,但是子盒子又不占有位置,最后父级盒子的高度为0,影响下面的标准流盒子
<!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;
}
div {
background-color: green;
}
.one {
width: 400px;
height: 400px;
background-color: pink;
float: left;
}
.two {
width: 300px;
height: 300px;
background-color: blueviolet;
float: left;
}
.three {
width: 400px;
height: 400px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div>
<div class="one">第一个浮动</div>
<div class="two">第二个浮动</div>
<div class="three">第三个浮动</div>
</div>
</body>
</html>
如果没有清除浮动产生的影响:
![image-20230705183916414](https://i-blog.csdnimg.cn/blog_migrate/5f609cdb3aca1e0c082ea9dfcaf7e065.png)
那么父级块盒子(绿色)在没有指定宽高时,其高度会变成0。为了清除这种影响,我们需要使用下面的几种方法
语法:clear: both;
闭合浮动 四种方式:
- 额外标签法也称为隔墙法,是W3C推荐的做法。
- 父级添加
overflow属性
- 父级添加
after伪元素
- 父级添加
双伪元素
13.3.1 额外标签法
<!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;
}
div {
background-color: green;
}
.one {
width: 400px;
height: 400px;
background-color: pink;
float: left;
}
.two {
width: 300px;
height: 300px;
background-color: blueviolet;
float: left;
}
.three {
width: 400px;
height: 400px;
background-color: red;
float: left;
}
.clear{
clear: both; /* 给最后的盒子加上clear: both; */
}
</style>
</head>
<body>
<div>
<div class="one">第一个浮动</div>
<div class="two">第二个浮动</div>
<div class="three">第三个浮动</div>
<div class="clear"></div> /* 在最后位置加一个块元素 */
</div>
</body>
</html>
![image-20230705184348906](https://i-blog.csdnimg.cn/blog_migrate/730699f442cdc21b3bb5bc3cab539bcb.png)
在浮动盒子的最后一个后面加上一个空盒子(只能是块级元素的盒子)
总结:额外标签法会在浮动元素后面添加一个空的块级元素标签。例如:<div class="clear"></div>
。
优点:通俗易懂
缺点:添加了无意义的标签
overflow:hidden;
13.3.2 父级添加overflow属性 可以给父级添加overflow:hidden、auto 或scroll
<!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;
}
.father {
overflow: hidden; /* 给父级添加该属性 */
background-color: green;
}
.one {
width: 400px;
height: 400px;
background-color: pink;
float: left;
}
.two {
width: 300px;
height: 300px;
background-color: blueviolet;
float: left;
}
.three {
width: 400px;
height: 400px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="one">第一个浮动</div>
<div class="two">第二个浮动</div>
<div class="three">第三个浮动</div>
</div>
</body>
</html>
优点:代码简洁
缺点:无法显示溢出的部分
13.3.3 :after伪元素法
:after方法是额外标签法的升级版,也是给父元素添加。
:after就是给父元素添加一个新的属性:
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
zoom:1;
}
这个的意思:在原来的父级块后面再加一个子块,这个子块看不到,只是起一个占位的作用。
- after: 在父级元素的最后面
- content:加一个内容,这个加的东西为一个行内元素
- display:将这个行内元素转换为块级元素
- height:将这个块级元素的高度变为0
- visibility:将这个块级元素变为不可见
- clear:both :清除浮动的影响
- zoom:1:CSS为了兼容IE6、7清除浮动的一种写法
最后的例子:
<!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 {
zoom:1;
}
.father {
overflow: hidden;
background-color: rgb(154, 192, 50);
}
.one {
width: 400px;
height: 400px;
background-color: aqua;
float: left;
}
.two {
width: 300px;
height: 300px;
background-color: blueviolet;
float: left;
}
.three {
width: 400px;
height: 400px;
background-color: rgb(201, 22, 46);
float: left;
}
</style>
</head>
<body>
<div class="father clearfix"> /*父元素的class名字后面加上clearfix*/
<div class="one">第一个浮动</div>
<div class="two">第二个浮动</div>
<div class="three">第三个浮动</div>
</div>
</body>
</html>
优点:没有增加标签,结构简单
缺点:需要照顾低版本的浏览器
代表网站:百度、淘宝网、网易等
13.3.4 双伪元素清除浮动
双伪元素法也是给父类元素添加:
.clearfix:before,clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix {
*zoom:1;
}
双伪元素清除浮动的方法,类似于前面的方法,就是在父级元素盒子的前面和后面都加上一个新的小盒子,然后clear:both
代表网站:小米、腾讯等