当元素的值开始浮动时,就脱离了正常的文档流,在页面的布局中就不会遵守原来的布局。
浮动通过flaot实现。
比如:三个布局时。
正常布局:
现在是三个竖排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height: 200px;
background-color: #7FFFD4;
}
.two{
background-color: #B8860B;
}
.three{
background-color: brown;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
浮动后:
现在是三个横排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height: 200px;
background-color: #7FFFD4;
float:left;
}
.two{
background-color: #B8860B;
}
.three{
background-color: brown;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
现在来说原理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height: 200px;
background-color: #7FFFD4;
}
.one{
float:left;
}
.two{
background-color: #B8860B;
}
.three{
background-color: brown;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
当第一个div进行了浮动,第二个div和第三个div不浮动时,页面布局会发生相应的变化。
第一个div进行浮动后,第一个div的正常文档流位置就空了出来,第二个div就会跑上去占据第一个div的位置。这样,如果第二个div和第一个div的大小一样,在肉眼上就是看不见第二个div的位置的,可以把第二个div的宽高设置的比第一个div的宽高大来查看效果。
这样操作后,第二个div的正常文档流的位置也空了出来,然后第三个div会占据第二个div的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height: 200px;
background-color: #7FFFD4;
}
.one{
float:left;
}
.two{
background-color: #B8860B;
width:300px;
height:300px;
}
.three{
background-color: brown;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
当第一个元素和第二个元素同时进行了左浮动,页面布局的变化如下。
当第一个div和第二个div发生了左浮动后,第一个div第二个div靠近页面的左面,第二个div紧紧跟在第一个div的身后,第三个div本来应该跟着在第二个div的下面,但是因为第二个div浮动后空出了正常文档流的第一个位置,第三个div后就跑到了正常文档流的第一个位置,因为第一个div和第二个div的位置在其他文档流。 也可以设置第三个div的宽高更大,来查看第三个div的位置,同时再设置一个div查看位置,观察效果.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height: 300px;
background-color: #7FFFD4;
}
.one{
float:left;
}
.two{
background-color: #B8860B;
width:300px;
height:300px;
float:left;
}
.three{
background-color: brown;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
当123个div同时发生了浮动,就第一个div,第二个div,第三个div就变成了一排。
而第四个元素就盯着正常文档流空出的那一行占据了那里。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height: 300px;
background-color: #7FFFD4;
}
.one{
float:left;
}
.two{
background-color: #B8860B;
width:300px;
height:300px;
float:left;
}
.three{
background-color: brown;
width:400px;
height:400px;
float: left;
}
.four{
width:500px;
height:500px;
background-color: crimson;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
第一个元素不浮动,第二三个元素浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height:200px;
}
.one{
background-color: aqua;
}
.two{
background-color: brown;
}
.three{
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
当第一个元素不浮动,第二个元素浮动时,第三个元素不浮动时。第三个元素隐藏在了第二个元素下面。可以把第三个元素宽高增大来看(看图三)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height:200px;
}
.one{
background-color: aqua;
}
.two{
background-color: brown;
float: left;
}
.three{
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height:200px;
}
.one{
background-color: aqua;
}
.two{
background-color: brown;
float: left;
}
.three{
background-color: blueviolet;
width:300px;
height:300px
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
当第一个div不浮动,第二个第三个div都同时浮动时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height:200px;
}
.one{
background-color: aqua;
}
.two{
background-color: brown;
float: left;
}
.three{
background-color: blueviolet;
float:left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
记录下特殊现象
当div都浮动时,第二个div宽设为100%。但是没有按照一般情况进行排列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height:200px;
}
.one{
background-color: aqua;
width:400px;
height:200px;
float:left;
}
.two{
background-color: brown;
float: left;
width:100%;
}
.three{
background-color: blueviolet;
float:left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:200px;
height:200px;
}
.one{
background-color: aqua;
width:400px;
height:200px;
float:left;
}
.two{
background-color: brown;
float: right;
width:400px;
}
.three{
background-color: blueviolet;
float:left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font-size: 20px;
color: white;
}
.A{
width:400px;
height:500px;
float: left;
background-color: green;
}
.B{
width: 400px;
height: 400px;
float: left;
background-color: blueviolet;
}
.C{
width: 400px;
height:300px;
float:left;
background-color: orangered;
}
</style>
</head>
<body>
<div class="A">1</div>
<div class="B">2</div>
<div class="C">3</div>
</body>
</html>
结论如下,
其他的还没想起来,等想起再说