以下代码说明什么是浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 网页里面的元素分2种, 一种是自己占一行的 叫做块元素 另一种是大家共聚一行的,一行放不下了才换行 行级元素-->
<!-- 描述:单独的一个标签,称之为单标签,或空标签 -->
<!-- 行级元素不具备宽高,就是你设置了也没有用 a, span -->
<!-- 块级元素是具备宽高的 div, p, ul, li -->
<!-- img还是行级元素,但是是特殊的行内块元素,具备宽高,有自己的特点 -->
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
}
#box1{
width: 200px;
height: 200px;
background: yellow;
float: left;
}
#box2{
width: 300px;
height: 300px;
background: blue;
float: left;
}
/*浮动会去比较前面有没有浮动元素,浮动只针对左右,找到的话就顶上去*/
/*浮动的好处...见另一串代码*/
</style>
</head>
<body>
<div id="box">
</div>
<div id="box1">
</div>
<div id="box2">
</div>
</body>
</html>
以下代码来说明浮动的好处
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*浮动的好处之一 可以去掉行内块自带的间距*/
img{
float: left;
}
/*浮动还可以让行内元素具备宽高*/
a{
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
</head>
<body>
<img src="img/1.jpg"/>
<img src="img/7.jpg"/>
<img src="img/8.jpg"/>
<a href="#">aaaaa</a>
<a href="#">bbbbb</a>
<a href="#">ccccc</a>
</body>
</html>
在不使用浮动时,每张图片以及每条字符串之间都会有间隙,在使用浮动以后间隙消失,如下图所示