理论基础:
浮动:让元素漂浮起来
作用:实现横向排列
只要想横向排列,就用浮动!
只要想横向排列,就用浮动!
只要想横向排列,就用浮动!
单词:float
值:left====让元素像左漂浮
right===让元素像右漂浮
首先以三个小盒子为例,详细介绍浮动是什么?怎么实现浮动?
<style>
.a1{
width: 50px;
height: 50px;
background-color: #ff0;
}
.a2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.a3{
width: 150px;
height: 150px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="a1">box1</div>
<div class="a2">box2</div>
<div class="a3">box3</div>
</body>
实现效果:
情况一:给第二个盒子加左浮动 .a2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
实现效果:
子2漂浮起来,盒子3顺势占领了盒子2的位置,但是没有将盒子3的文字覆盖住
归纳特点:1、元素一旦做了浮动,就会漂浮起来不占位置,后面的元素会向前补齐
2、浮动的元素是覆盖不了文字和图片的
(前两条专业话术:半脱离文档流/半脱标)
情况二:第二个盒子和第三个盒子都做左浮动
实现效果:
第二个盒子漂浮以来向左,第三个接着飘起来在第二个盒子后面排队。
情况三:给三个盒子全部做左漂浮操作
实现效果:
三个盒子从一到三排列整齐,成横向排列
情况四:给盒子二和盒子三设置向右漂浮的样式,盒子一不做设置。
实现效果:
盒子二先像右飘走了,三紧追其后,排在了它的后面。
情况四:给三个盒子都添加像右浮动的样式
实现效果:
三个盒子在右边从一到三排列整齐,成横向排列
归纳特点:
3、如果多个元素做的都是左浮动,那么元素就是从左到右依次横向排列;
如果多个元素做的都是右浮动,那么元素就是从右到左依次横向排列
情况五:设置多个盒子,超过浏览器一行所能容纳的数量
实现效果:
根据浏览器的大小,自动变化
归纳特点:
4、如果一行放不下了,是会自动换行的。
情况六: 将盒子一的宽度取消,只设置高度,然后给盒子一设置左浮动。 <style>
.a1{
height: 100px;
background-color: #ff0;
float: left;
}
</style>
</head>
<body>
<div class="a1">box1</div>
</body>
未加浮动前的实现效果:
加浮动后的实现效果:
归纳特点:
5、如果没有设置宽度,并且元素做了浮动,那么这个元素的宽度是由内容决定的。
情况七:为 <span>标签等一系列横向排列的标签设置浮动 <style>
.a1{
height: 200px;
width: 200px;
background-color: #ff0;
float: left;
}
</style>
</head>
<body>
<span class="a1">我是一个可爱的span标签</span>
</body>
未加浮动前的实现效果:
设置宽和高没有用哦~
加浮动后的实现效果:
归纳特点:
6、元素一旦做了浮动,那么无论是什么元素都可以添加宽高了。
清除浮动:
清除浮动=====清除的是浮动带来的不好的影响===后面元素向前补齐
谁受到了影响就加给谁
清除浮动:clear:
clear:left;(清除前面盒子左浮动带来的影响)
clear:right;(清除前面盒子左浮动带来的影响)
clear:both;(两端同时清除)
谁不想受到影响!谁不想补位!谁就用浮动!
浮动的知识就这么多啦~用到的地方很多,比如页面构图呀,制作导航栏呀,都可以用到浮动。可以跟着做一个小练习哦~根据浮动做出如下效果
我是这样做的: <style>
.a00{
width: 600px;
}
.div1{
background-color: pink;
height: 100px;
width: 600px;
color: black;
line-height: 100px;
text-align: center;
font-weight: 700;
font-size: 26px;
}
.div2{
height: 250px;
}
.a1{
height: 250px;
width: 200px;
background-color: orange;
float: left;
font-size: 26px;
text-decoration:underline ;
font-style: italic;
}
.a2{
height: 250px;
width: 200px;
background-color: rgb(51, 190, 233);
float: right;
font-size: 26px;
text-decoration:underline ;
font-style: italic;
}
.div3{
height: 150px;
}
.b1{
width: 200px;
height: 150px;
background-color: blue;
float: left;
}
.b2{
width: 200px;
height: 150px;
background-color: yellow;
float: left;
}
.b3{
width: 200px;
height: 150px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<div class="a00">
<div class="div1">
头部
</div>
<div class="div2">
<div class="a1">左边</div>
<div class="a2">右边</div>
</div>
<div class="div3">
<div class="b1">左</div>
<div class="b2">中</div>
<div class="b3">右</div>
</div>
</div>
</body>
特点:
1、元素一旦做了浮动,就会漂浮起来不占位置,后面的元素会向前补齐
2、浮动的元素是覆盖不了文字和图片的
(前两条专业话术:半脱离文档流/半脱标)
3、如果多个元素做的都是左浮动,那么元素就是从左到右依次横向排列;
如果多个元素做的都是右浮动,那么元素就是从右到左依次横向排列。
4、如果一行放不下了,是会自动换行的。
5、如果没有设置宽度,并且元素做了浮动,那么这个元素的宽度是由内容决定的。6、元素一旦做了浮动,那么无论是什么元素都可以添加宽高了