- 这样设置的话,box1的float默认值为none,所以必须遵守那个水平布局的公式,所以它会有右外边距,所以box2会自动换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: orange;
/*
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值:
none默认值,元素不浮动
left元素向左浮动
right元素向右浮动
注意,元素设置浮动以后,水平布局的等式便不需要强制成立
元素设置浮动以后,会完全从文档了中脱离,不再占用文档流的位置,
所以元素下面的还在文档里中的元素会自动向上移动
*/
}
.box2{
width: 500px;
height: 500px;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
- 那我让box2浮动一些试试?发现怎么浮动都不行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: orange;
/*
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值:
none默认值,元素不浮动
left元素向左浮动
right元素向右浮动
注意,元素设置浮动以后,水平布局的等式便不需要强制成立
元素设置浮动以后,会完全从文档了中脱离,不再占用文档流的位置,
所以元素下面的还在文档里中的元素会自动向上移动
*/
}
.box2{
width: 500px;
height: 500px;
background-color: #bfa;
float:right;
/* float: left; */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
- 问题所在就是必须取消box1的右外边距。所以我们给box1设置浮动,它就不必强制遵守那个水平布局的公式了,就没有外边距了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: orange;
/*
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值:
none默认值,元素不浮动
left元素向左浮动
right元素向右浮动
注意,元素设置浮动以后,水平布局的等式便不需要强制成立
元素设置浮动以后,会完全从文档了中脱离,不再占用文档流的位置,
所以元素下面的还在文档里中的元素会自动向上移动
*/
float: left;
}
.box2{
width: 500px;
height: 500px;
background-color: #bfa;
/* float:right; */
/* float: left; */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
但是你会发现box2掉到了box1的下面,因为box1已经脱离了文档流,相当于一个多层蛋糕,它已经不是最底层了,可能已经到倒数第二层了。
- 那如果我想让它们并排怎么办?方法就是让box2也脱离文档流,这时候它们就在同一层,并且不用强制遵守水平布局的公式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: orange;
/*
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值:
none默认值,元素不浮动
left元素向左浮动
right元素向右浮动
注意,元素设置浮动以后,水平布局的等式便不需要强制成立
元素设置浮动以后,会完全从文档了中脱离,不再占用文档流的位置,
所以元素下面的还在文档里中的元素会自动向上移动
*/
float: left;
}
.box2{
width: 500px;
height: 500px;
background-color: #bfa;
/* float:right; */
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
- 浮动的特点
/*
浮动的特点:
1、 浮动元素完全脱离文档流,不再占据文档流中的位置
2、 设置浮动以后元素会向父元素的左侧或右侧移动
3、 浮动元素默认不会从父元素中移出
4、 浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
5、 浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高
*/