CSS核心内容之浮动
1.浮动涉及到左浮动,右浮动,清除浮动.
2.浮点的特点:
1.向指定的方向浮动,并且让出空间
2.如果后面的元素也是浮动的,那么后面的元素就会在碰到前面的浮动的元素或者边框时,就定位在那里
3.如果后面的元素没有浮动,则该元素就会在浮动的元素的下面
4.行内元素和块元素都可以浮动,行内元素浮动后会变成块元素
5.浮动的元素不占用空间
3.左浮动的实例代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
border:1px solid red;
width:500px;
height: 240px;
}
.div-box1{
width:150px;
height:100px;
background-color:pink;
border:1px solid blue;
float:left;/*使用左浮动*/
margin-top:5px;
margin-left:5px;
}
.span1{
background-color:silver;
width:150px;
height:100px;
float:left;/*行内元素浮动后会变成块元素*/
margin-top:5px;
margin-left:5px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div-box1">div1</div>
<div class="div-box1">div2</div>
<div class="div-box1">div3</div>
<div class="div-box1">div3</div>
<span class="span1">span1</span>
<span class="span1">span2</span>
</div>
</body>
</html>
效果如下:
当然也可以使用多元素选择器把两个标签放在一起来调整样式.
修改后的代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
border:1px solid red;
width:500px;
height: 240px;
}
.div-box1,.span1{
width:150px;
height:100px;
background-color:pink;
border:1px solid blue;
float:left;/*使用左浮动*/
margin-top:5px;
margin-left:5px;
}
.span1{
background-color:silver;
/*width:150px;*/
/*height:100px;*/
/*float:left;!*行内元素浮动后会变成块元素*!*/
/*margin-top:5px;*/
/*margin-left:5px;*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div-box1">div1</div>
<div class="div-box1">div2</div>
<div class="div-box1">div3</div>
<div class="div-box1">div3</div>
<span class="span1">span1</span>
<span class="span1">span2</span>
</div>
</body>
</html>
效果如下:
可以看到基本效果并没有改变,只是多个一个边框而已.
那么浮动是怎么让出空间的呢??
来看下面的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div-box1{
background-color:red;
width:60px;
height:40px;
float:left;
}
.div-box2{
width:120px;
height:60px;
background-color:blue;
}
.div-box3{
width:200px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="div1">
<div class="div-box1">div1</div>
<div class="div-box2">div2</div>
<div class="div-box3">div3</div>
</div>
</body>
</html>
效果如下:
如果让div-box2也浮动起来,效果会是怎么样的呢??
给div-box2添加浮动,代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div-box1{
background-color:red;
width:60px;
height:40px;
float:left;
}
.div-box2{
width:120px;
height:60px;
background-color:blue;
float:left;
}
.div-box3{
width:200px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="div1">
<div class="div-box1">div1</div>
<div class="div-box2">div2</div>
<div class="div-box3">div3</div>
</div>
</body>
</html>
效果如下:
4.浮动的元素不占用空间,该怎么理解呢?
来看下面的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div-box1{
background-color:red;
width:60px;
height:40px;
float:left;/*设置左浮动*/
}
.div-box2{
width:120px;
height:60px;
background-color:blue;
float:left;/*设置左浮动*/
}
.div-box3{
width:200px;
height:100px;
background-color:yellow;
float:left;/*设置左浮动*/
}
.div1{
width:500px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="div1">
<div class="div-box1">div1</div>
<div class="div-box2">div2</div>
<div class="div-box3">div3</div>
</div>
</body>
</html>
效果如下:
当一个大的div包括了若干小div,如果父div的内的所有子div都浮动,则父div的高度为0.
当把一个div设置成右浮动时,这个div脱离标准流并且向右浮动,直到它的右边缘接触到包含框的右边缘.
5.右浮动的实例:
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div-box{
background-color:blue;
width:60px;
height:40px;
margin:5px;
}
.div1{
width:200px;
height:200px;
border:1px solid red;
}
.te{
float:right;
margin-right:20px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div-box te">div1</div>
<div class="div-box">div2</div>
<div class="div-box">div3</div>
</div>
</body>
</html>
效果如下:
6.浮动的卡的现象
如果浮动元素的高度不同,那么当其向下移动的时候,可能会被其他浮动元素"卡住",直到调整到合适的高度时,才会恢复到正常的高度
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div-box{
background-color:deeppink;
width:100px;
height:50px;
margin:5px;
float:left;
}
.div1{
width:500px;
height:200px;
border:1px solid red;
}
.te{
height:100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div-box te">div1</div>
<div class="div-box">div2</div>
<div class="div-box">div3</div>
<div class="div-box">div3</div>
<div class="div-box">div3</div>
<div class="div-box">div3</div>
<div class="div-box">div3</div>
<div class="div-box">div3</div>
<div class="div-box">div3</div>
<div class="div-box">div3</div>
<div class="div-box">div3</div>
</div>
</body>
</html>
效果如下: