这里写自定义目录标题
浮动
1. 浮动简介
浮动,可以使用一个元素向其父元素的左侧或者右侧移动
使用float
属性上设置元素的浮动
float
可选值:
none
默认值,元素不浮动left
元素向左浮动right
元素向右浮动
注意:
- 元素浮动之后,水平布局不需要满足强制公式
- 浮动之后,脱离文档流,像一个气球一样浮在上面,不会占用文档流的位置,所以其他元素可以占用浮动之前的位置
2. 浮动特点
- 脱离文档流,不占据文档流的布局位置(气球)
- 浮动之后,向父元素的左侧和右侧移动
- 浮动之后,不会浮出父元素
- 多个浮动时候,浮动元素向左或向右移动时,不会超过前边的浮动元素(先来后到的顺序)
- 如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
- 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以利用浮动来设置文字环绕图片的效果
示例
<style>
.box1 {
width: 100px;
height: 100px;
background-color: orange;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
浮动的box1已经不会影响布局位置,他已经浮动在上面,而box2就要顶上他的位置,此时就会有覆盖的效果
多个浮动布局
多个浮动时候,浮动元素向左或向右移动时,不会超过前边的浮动元素(先来后到的顺序)
上边没有浮动,下边浮动
如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
浮动与文字
浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以利用浮动来设置文字环绕图片的效果
3. 脱离文档流的特点
块元素:
- 块元素不再独占页面的一行
- 脱离文档流以后,块元素的宽度和高度默认都被内容撑开
行内元素:
- 行内元素脱离文档流以后会,特点和块元素一样
例子:原来span不可以设置width,height,浮动 之后就可以设置了