1. 浮动:
CSS 属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,但是仍然保持部分的流动性(与绝对定位相反)—— MDN
2. 元素浮动的特点:
- 脱离文档流
-
元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。
脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
-
-
浮动后的元素变为行内块
-
默认宽和高都被内容撑开(尽可能小)
-
不会有行内块空白问题
-
可以设置宽、高、margin、padding
-
不会独占一行
-
-
浮动后的元素会自动排成一行,位置不够时会到下一行(不进行元素压缩/拉伸)
-
元素浮动不会超出父元素的范围
-
如果父元素没有高度,会造成父元素高度塌陷
-
浮动属性是给需要浮动的元素进行添加
3. 浮动示例
1. 容器设置
子元素超出父元素部分显示是由于默认 overflow:visible,父元素并没有被撑大
2. 全部项目浮动
1. 全部项目左浮动
2. 全部项目右浮动
1先进行右浮动,占据了右上角的位置
3. 标准流盒子与浮动元素的位置关系
1. 1号项目左浮动、5号项目右浮动
- 1左浮动后,2盒子占据了1原来的位置,但是文本内容会围绕1
- 5右浮动没有到右上角的原因是前面的4是标准流盒子
- 标准流盒子可以占据浮动元素的位置
- 浮动元素不会逾矩标准流盒子的位置
2. 1右浮动
- 1右浮动后,2标准流盒子占据了1原来的位置
4. 容器没有高度时
- 容器没有设置高度时,可以看到容器的高度由子元素标准流盒子高度撑起
项目全部浮动
- 此时子元素都为浮动元素,不能撑起父元素的高度——父元素高度塌陷
4. 元素浮动带来的影响
- 对父元素:不能撑起父元素高度,导致父元素高度塌陷,但父元素的宽度仍束缚着浮动元素
- 对兄弟元素:
- 都浮动:排成一行,位置不够,下一行
- 非都浮动:
- 标准流盒子元素会占据浮动元素原来的位置
- 浮动元素不会占据前面的标准流盒子元素的位置(无影响)
5. 清除浮动元素带来的影响
- 给父元素设置高度(例如浮动示例中的非4的部分)
- 给父元素设置浮动(但是会带来其他影响)
给父元素设置浮动,父元素和子元素在同一层,故子元素的高度撑起了父元素的高度
- 给父元素添加 overflow:hidden
overflow:hidden超出部分隐藏 会计算高度
- 在浮动元素的最后添加一个空div,加属性 clear
<div style="clear: both;"></div>
<div style="clear: left;"></div>
<div style="clear: right;"></div>
- 给父元素设置伪元素
.container::after{
content: '';
display: block;
clear: both;
}
- 为了代码简洁通用,可以设置一个类clearfix,在需要清除浮动的类后面跟clearfix即可
.clearfix::before{
display: block;
clear: both;
height: 0;
content: ' ';
}
.clearfix::after{
display: block;
clear: both;
height: 0;
content: ' ';
}
在布局中,若兄弟元素要么都浮动要么都不浮动
6. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float</title>
<style>
*{
box-sizing: border-box;
margin: 0;
}
.container{
width: 800px;
margin: 0 auto;
background-color: #bfa;
border: 1px solid black;
/* float: left; */
/* overflow: hidden; */
}
.container::after{
content: '';
display: block;
clear: both;
}
.item{
width: 200px;
height: 120px;
background-color: darkcyan;
border: 1px solid red;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 120px;
float: left;
}
/* .one{
float: right;
} */
/* .five{
float: right;
} */
</style>
</head>
<body>
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
<div class="item five">5</div>
<!-- <div style="clear: both;"></div> -->
</div>
</body>
</html>
共勉