2021-01-18 18:11:23 +08:00
|
|
|
|
# 浮动（float）
|
|
|
|
|
|
|
2021-01-20 11:25:18 +08:00
|
|
|
|
## 为什么需要浮动
|
|
|
|
|
|
|
|
|
|
|
|
- 最初浮动是为了像word有文字环绕，图片嵌入的功能出现的
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 让多个块级元素水平排列成一行
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 实现两个块级盒子的左对齐和右对齐
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 浮动的本质
|
|
|
|
|
|
|
|
|
|
|
|
1. 浮动的包裹性
|
|
|
|
|
|
|
|
|
|
|
|
抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
|
|
|
|
|
|
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果
|
|
|
|
|
|
|
|
|
|
|
|
但是 float和display:inline-block 无法完全等同
|
|
|
|
|
|
|
|
|
|
|
|
原因：
|
|
|
|
|
|
|
|
|
|
|
|
- float可以自定义方向（从左往右或从右往左） inline-block只有从左到右一个水平排列的方向
|
|
|
|
|
|
- float会使周围文字环绕元素 inline-block不会
|
|
|
|
|
|
|
|
|
|
|
|
2. 浮动的破坏性
|
|
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
flex破坏性指的是，父元素高度塌陷 。
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
把一张图片放在div里显示：
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
```
|
|
|
|
|
|
<div class="outer">
|
|
|
|
|
|
<img src="./images/2.jpg" width="150px" height="100px">x
|
|
|
|
|
|
</div>
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
```
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
```
|
|
|
|
|
|
.outer{
|
|
|
|
|
|
width: 400px;
|
|
|
|
|
|
background-color: lightblue;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
这时候如果给图片加上float:left ,父元素蓝色框就只有x占据的宽度
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
```
|
|
|
|
|
|
.outer{
|
|
|
|
|
|
width: 400px;
|
|
|
|
|
|
background-color: lightblue;
|
|
|
|
|
|
float:left;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
这时候如果把x去掉 那么父元素（蓝色框） 就直接没了
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## float 使用
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
float:left 左浮动
|
|
|
|
|
|
|
|
|
|
|
|
float:right 右浮动
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
float:left 实现块级元素水平排列
|
2021-01-20 11:25:18 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<!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>
|
|
|
|
|
|
*{
|
|
|
|
|
|
margin:0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.box{
|
|
|
|
|
|
width: 1000px;
|
|
|
|
|
|
height: 300px;
|
|
|
|
|
|
background: gold;
|
|
|
|
|
|
margin: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.box1{
|
|
|
|
|
|
/* width:60px;
|
|
|
|
|
|
height: 60px; */
|
|
|
|
|
|
background: red;
|
|
|
|
|
|
/* background: rgba(255, 0, 0, 0.363); */
|
|
|
|
|
|
/* float: left; */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
.box2{
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
height:80px;
|
|
|
|
|
|
background: gray;
|
|
|
|
|
|
border: 1px solid pink;
|
|
|
|
|
|
/* float:right */
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
.a{
|
|
|
|
|
|
/* width: 70px;
|
|
|
|
|
|
height: 70px;
|
|
|
|
|
|
border: 1px solid blue;
|
|
|
|
|
|
background: pink; */
|
|
|
|
|
|
clear: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="box">
|
|
|
|
|
|
<div class="box1">asaaaa</div>
|
|
|
|
|
|
<div class="box2"></div>
|
|
|
|
|
|
<div class="box2"></div>
|
|
|
|
|
|
<div class="box2"></div>
|
|
|
|
|
|
<div class="box2"></div>
|
|
|
|
|
|
<div class="box2"></div>
|
|
|
|
|
|
<div class="box2"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 清除浮动
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
clear:left(清除左浮动)/right(清除右浮动)/both(清除左浮动+右浮动)
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
哪边不允许有浮动元素，clear就是对应方向的值，两边都不允许就是`both`
|
|
|
|
|
|
|
|
|
|
|
|
方案1：给需要清浮动的元素加clear属性
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
.box4{
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
height:80px;
|
|
|
|
|
|
background: blue;
|
|
|
|
|
|
border: 1px solid pink;
|
|
|
|
|
|
clear: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
方案2：
|
|
|
|
|
|
|
|
|
|
|
|
html:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<div class="box">
|
|
|
|
|
|
<div class="box1">asaaaa</div>
|
|
|
|
|
|
<div class="box2"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="box2">4</div>
|
|
|
|
|
|
<div class="box2">5</div>
|
|
|
|
|
|
<!-- <div class="box2" style="height: 180px;">6</div> -->
|
|
|
|
|
|
<div class="blank"></div>
|
|
|
|
|
|
<div class="box4"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
css:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
.blank{
|
|
|
|
|
|
clear: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
方案3：使用伪元素清除浮动
|
|
|
|
|
|
|
|
|
|
|
|
css:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
.boxes:after {
|
|
|
|
|
|
content: '.';
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
clear: both;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
html:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<div class="box">
|
|
|
|
|
|
<div class="boxes clearfix">
|
|
|
|
|
|
<div class="box1">asaaaa</div>
|
|
|
|
|
|
<div class="box2"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="box2">4</div>
|
|
|
|
|
|
<div class="box2 blankdiv">5</div>
|
|
|
|
|
|
<!-- <div class="box2" style="height: 180px;">6</div> -->
|
|
|
|
|
|
<div class="blank"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box4"></div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
方案4：overflow 清除浮动
|
|
|
|
|
|
|
|
|
|
|
|
html：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<div class="box">
|
|
|
|
|
|
<div class="boxes clearfix">
|
|
|
|
|
|
<div class="box1">asaaaa</div>
|
|
|
|
|
|
<div class="box2"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="box2">4</div>
|
|
|
|
|
|
<div class="box2 blankdiv">5</div>
|
|
|
|
|
|
<!-- <div class="box2" style="height: 180px;">6</div> -->
|
|
|
|
|
|
<div class="blank"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box4"></div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
css:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
.boxes{
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
