（三）css浮动

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

属性值描述
none默认值，元素不浮动left元素向左浮动
right元素向右浮动（三）css浮动
记录前端学习过程，⽅便查漏补缺，如有错误，请评论告知~
⼀、传统⽹页布局⽅式
CSS提供了三种传统的布局⽅式，即盒⼦是如何进⾏排列的：
标准流
浮动
定位
标准流
标准流是最进本的布局⽅式，所谓标准流，就是标签按照规定好默认的⽅式排列
1、块级元素会独占⼀⾏，从上向下顺序排列
常⽤元素：div、p、h1~h6、ul、table等
2、⾏内元素会按照顺序，从左⾄右顺序排列，碰到⽗元素边缘则⾃动换⾏
常⽤元素：span、a、i等
⼆、浮动（float）
1、什么是浮动？为什么需要浮动？
浮动（float）属性⽤于创建浮动框，将其移动到⼀边，直到左边缘或右边缘触及包含块或另⼀个浮动框的边缘
简单理解就是：浮动会使元素向左或向右移动，其周围的元素也会重新排列
语法：
选择器｛ float：属性值；｝
那我们为什么需要浮动？
因为有很多的布局效果，仅靠标准流很难或者是没有办法实现的，⽐如：让多个div盒⼦⽔平排成⼀⾏（当然，
转换成⾏内块元素也不失为⼀种⽅法，但彼此之间会有很⼤的空⽩缝隙，很难控制），此时就可以利⽤浮动来
完成布局。

在上⾯也说了：浮动可以改变元素标签的默认排列⽅式。

2、浮动的特性
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>
.one {
float: left;
width: 80px;
height: 80px;
background-color: pink;
}
.two {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>

<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
代码测试
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>
.one {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.two {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
代码测试
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>
.box {
width: 200px;
height: 100px;
border: 1px solid #000;
}
a {
float: right;
height: 40px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box">
<a href="#">⾏内元素：链接</a>
</div>
</body>
</html>
代码测试
属性值
描述left
清除左侧浮动的影响right
清除右侧浮动的影响both 同时清除左右浮动的影响3、⼏个注意点（⾮绝对）
① 浮动的盒⼦只会影响浮动盒⼦后⾯的标准流，不会影响前⾯的标准流
② ⼀个盒⼦浮动了，理论上其余的兄弟元素也要设置浮动，以防引起问题
③ 为了约束浮动元素的位置，⼀般采取的策略是：先⽤标准流的⽗元素排列上下位置，之后内部⼦元素采取浮动排列左右位置
4、为什么清除浮动？
由于⽗级盒⼦在很多情况下，不⽅便给⾼度，但是盒⼦浮动⼜不占有位置，最后⽗级盒⼦⾼度为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 >
.box1 {
width : 200px ;
border : 1px solid #000;
}
.son1,.son2 {
float : left ;
width : 50px ;
height : 90px ;
}
.son1 {
background-color : aqua ; } .son2{
background-color : bisque ;
}
.box2 {
width : 100px ;
height : 100px ;
background-color : aquamarine ;
}
</style >
</head >
<body >
<div class ="box1">⽗盒⼦box1
<div class ="son1">son1左浮</div >
<div class ="son2">son2左浮</div >
</div >
<div class ="box2">⽗盒⼦兄弟box2
</div >
</body >
</html >
代码测试
清除浮动的本质
清除浮动的本质时清除浮动元素造成的影响
如果⽗级盒⼦有⾼度，则不需要清除浮动
清除浮动以后，⽗级就会根据浮动的⼦盒⼦⾃动检测⾼度
5、清除浮动
语法：选择器｛ clear ：属性值；｝
清除浮动的策略是：闭合浮动6、清除浮动的⽅法1. 额外标签法，也称为隔墙法2. ⽗级添加overflow 属性
3. ⽗级添加after 伪元素
4. ⽗级添加双伪元素
6.1、额外标签法
额外标签法即在浮动元素末尾添加⼀个空的标签，例如：<div style="clear:both;">等需要注意的是，这个标签必须是块级元素
<!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;
border: 1px solid #000;
}
.son1,.son2 {
float: left;
width: 50px;
height: 90px;
}
.son1 {
background-color: aqua;
}
.son2{
background-color: bisque;
}
.box2 {
width: 100px;
height: 100px;
background-color: aquamarine;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box1">⽗盒⼦box1
<div class="son1">son1左浮</div>
<div class="son2">son2左浮</div>
<div class="clear"></div>
<br>
</div>
<div class="box2">⽗盒⼦兄弟box2
</div>
</body>
</html>
代码测试
此⽅法缺点也很明显：添加了⽆意义的标签，结构变差
6.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>
.box1 {
/* 给⽗级添加overflow属性，值设置为hidden */
overflow: hidden;
width: 200px;
border: 1px solid #000;
}
.son1,.son2 {
float: left;
width: 50px;
height: 90px;
.son1 {
background-color: aqua;
}
.son2{
background-color: bisque;
}
.box2 {
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1">⽗盒⼦box1
<div class="son1">son1左浮</div>
<div class="son2">son2左浮</div>
</div>
<div class="box2">⽗盒⼦兄弟box2
</div>
</body>
</html>
代码测试
6.3 :after伪元素法
:after 伪元素的⽅式是额外标签法的升级版，也是给⽗元素添加/* 给⽗级添加 :after伪元素 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE 6 7清除浮动专⽤ */
*zoom: 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>
/* 给⽗级添加 :after伪元素 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE 6 7清除浮动专⽤ */
*zoom: 1;
}
.box1 {
width: 200px;
border: 1px solid #000;
}
.son1,
.son2 {
float: left;
width: 50px;
height: 90px;
}
.son1 {
background-color: aqua;
.son2 {
background-color: bisque;
}
.box2 {
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1 clearfix">⽗盒⼦box1
<div class="son1">son1左浮</div>
<div class="son2">son2左浮</div>
</div>
<div class="box2">⽗盒⼦兄弟box2
</div>
</body>
</html>
代码测试
6.4 给⽗级添加双伪元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 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>
/* 给⽗级添加双伪元素 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.box1 {
width: 200px;
border: 1px solid #000;
}
.son1,
.son2 {
float: left;
width: 50px;
height: 90px;
}
.son1 {
background-color: aqua;
}
.son2 {
background-color: bisque;
}
.box2 {
width: 100px;
height: 100px;
background-color: aquamarine; }
</style>
</head>
<body>
<div class="box1 clearfix">⽗盒⼦box1
<div class="son1">son1左浮</div>
<div class="son2">son2左浮</div> </div>
<div class="box2">⽗盒⼦兄弟box2
</div>
</body>
</html>
代码测试。