CSS中浮动布局float（⼩⽶布局案例、导航栏案例、
overflow）
1. CSS 布局的三种机制
⽹页布局的核⼼——就是⽤ CSS 来摆放盒⼦。
CSS 提供了 3 种机制来设置盒⼦的摆放位置，分别是普通流（标准流）、浮动和定位，
其中：
普通流（标准流）
块级元素会独占⼀⾏，从上向下顺序排列；
常⽤元素：div、hr、p、h1~h6、ul、ol、dl、form、table
⾏内元素会按照顺序，从左到右顺序排列，碰到⽗元素边缘则⾃动换⾏；
常⽤元素：span、a、i、em等
⽰例代码：
<!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 {
height: 100px;
background-color: orange;
margin-top: 10px;
}
</style>
</head>
<body>
<div>青春正能量</div>
<div>青春正能量</div>
<span>青春正能量</span>
<span>青春正能量</span>
</body>
</html>
浮动
让盒⼦从普通流中浮起来，主要作⽤让多个块级盒⼦⼀⾏显⽰。
定位
将盒⼦定在浏览器的某⼀个位置——CSS 离不开定位，特别是js 特效。
2. 为什么需要浮动？
虽然知道⾏内块（inline-block） 但是他却有⾃⼰的缺陷：
1. 它可以实现多个元素⼀⾏显⽰，但是中间会有空⽩缝隙。
2. 它不能实现盒⼦左右对齐
因此标准流不能满⾜我们的需要了，需要浮动来完成⽹页布局。
⽰例代码：
<!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: 200px;
height: 100px;
display: inline-block;
background-color: orange;
}
.demo {
background-color: orangered;
}
</style>
</head>
<body>
<div>青春正能量</div>
<div class="demo">青春正能量</div>
<div>青春正能量</div>
</body>
</html>
3. 什么是浮动(float)
元素的浮动是指设置了浮动属性的元素会
1. 脱离标准普通流的控制
2. 移动到指定位置。
作⽤
1. 让多个盒⼦(div)⽔平排列成⼀⾏，使得浮动成为布局的重要⼿段。
2. 可以实现盒⼦的左右对齐等等..
3. 浮动最早是⽤来控制图⽚，实现⽂字环绕图⽚的效果。
语法：
选择器 { float: 属性值; }
属性值描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动
特点1：  【浮。脱离标准流。 俗称 “脱标”】
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
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>
.demo1 {
/*不是标准流了，漂浮起来，浮在标准流的上⾯*/
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
.demo2 {
width: 300px;
height: 300px;
background-color: purple;
}
</style>
</head>
<body>
<div class="demo1">青春正能量</div>
<div class="demo2">青春正能量</div>
</body>
</html>
特点2： 【漏】
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
/* 让第 1 个盒⼦漂浮起来，不占位置 */
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
box2下⾯的跑到box1盒⼦下⾯了， 被box1给压住了，遮挡起来了
特点3： 【特  float属性会改变元素display属性 】
任何元素都可以浮动。浮动元素会⽣成⼀个块级框，⽽不论它本⾝是何种元素。 ⽣成的块级框和⾏内块极其相似。网页float是什么意思

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。