目录
1.浮动
1.1 浮动的作用
- 图文环绕
- 网页布局:让垂直布局的盒子变成水平布局,如:一个在左,一个在右
1.2 浮动的代码
属性名:float
属性值:
属性名 | 效果 |
---|---|
left | 左浮动 |
right | 右浮动 |
1.3 浮动的特点
1)浮动元素会脱离标准流(简称:脱标),在标准流中不占位置(相当于从地面飘到了空中)
2)浮动元素比标准流高半个级别,可以覆盖标准流中的元素
3)浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
4)浮动元素会受到上面元素边界的影响
5)浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
注意点:
- 浮动的元素不能通过text-align:center或者margin:0 auto,让浮动元素本身水平居中
实例:
2. 清除浮动
2.1 清除浮动的介绍
1. 含义:清除浮动带来的影响
影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
2. 原因:
子元素浮动后脱标 → 不占位置
3. 目的:
需要父元素有高度,从而不影响其他网页元素的布局
2.2 清除浮动的方法
① 直接设置父元素高度
特点:
- 优点:简单粗暴,方便
- 缺点:有些布局中不能固定父元素高度。
② 额外标签法
操作:
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
特点:
- 缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂
③ 单伪元素清除法
操作:用伪元素替代了额外标签
/* 基本写法 */
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 补充写法 */
.clearfix::after {
content: '.';
display: block;
clear: both;
/* 补充代码:在网页中看不到伪元素 */
height: 0;
visibility: hidden;
}
特点:
- 优点:项目中使用,直接给标签加类即可清除浮动
④ 双伪元素清除法
操作:
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
特点:
- 优点:项目中使用,直接给标签加类即可清除浮动
⑤ 给父元素设置overflow : hidden
操作:
- 直接给父元素设置 overflow : hidden
特点:
- 优点:方便