我们先来随便定义三个box
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>"
<title>浮动</title>
<style type="text/css">
.box1{
width:200px;
height:200px;
background-color: red;
}
.box2{
width:200px;
height:200px;
background-color:yellow;
}
.box3{
width:200px;
height:200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
可以发现这三个box是竖着排列的。因为块元素在文档流中是默认垂直排列的，所以这三个div自上至下依次排开。这种情况影响了我们对网页的布局，我们要如何让它可以横向排列呢？不妨给它们都加上下面这一行语句试试。
display:inline-block;/*行内块元素*/
好啦它横过来了，但是我们又发现一个新的问题。我们并没有设置块间距，但是结果显示块与块之间存在着间距是怎么回事呢？因为行内块元素可以理解为文字，div之间的空格引起的。解决方法：
<div class="box1"></div><div class="box2"></div><div class="box3"></div>
既然块元素在文档流里垂直排列，那我们是不是可以考虑让它脱离文档流？因此我们可以使用float来使元素浮动。
float可选值：
1、none，默认值，元素默认在文档流中排列
2、left，元素会立即脱离文档流，向页面的左侧浮动
3、Right，元素会立即脱离文档流，向页面的右侧浮动
我们把box1设一个float：right；看看结果
可以看到box1向右浮动了，其余块依旧是垂直排列。元素浮动后会尽量向页面的左上或者右上漂浮，直到遇到父元素边框。如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。如果一行中不能容下该元素，则会自动换行。我们把box1调宽看看结果如何
.box1{
float:left;
width:1200px;
height:200px;
background-color: red;
}
.box2{
float:left;
width:200px;
height:200px;
background-color:yellow;
}
.box3{
float:left;
width:200px;
height:200px;
background-color: green;
}
我们可以设置多种float情况看看运行结果，在此就不一一列举了。
我们再来看看另外一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>"
<title></title>
<style type="text/css">
.box1{
width:100px;
height:100px;
background-color: red;
}
.p1{
height:200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1"></p>
</body>
</html>
红色块与顶部以及两个块之间都存在间距，这是默认样式导致的。加上下列语句可将其去掉。
*{
margin:0;
padding:0;
}
如果我们往块内添加文字，浮动对文字会有什么影响呢？
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以用这种操作实现文字图片的效果。
在文档流中，子元素的宽度、高度默认占父元素的全部，但是当元素设置浮动后会完全脱离文档流，即宽度、高度不再是默认占父元素的全部了，其高度、宽度被内容撑开。此外，内联函数不可设置宽高，但是脱离文档流后会变成块元素，即可设置宽高。
网友评论