在学习浮动之前，先要知道块级元素与行内元素的区别，传送门：
块级元素与行内元素的区别
现在有如下需求，需要两个div实现并排效果，可以发现在标准流当中基本是不可能现实的，div是块级元素，而块级元素的一个性质就是不能实现与其他元素实现并排，这与我们所提的需求相矛盾。
那么在CSS当中是怎么解决这个问题的，就是应用浮动来解决的。
浮动的性质有三：
- 浮动元素脱离标准文档流
- 浮动元素在同一个层叠上下文中互相贴靠
- 浮动元素可以实现“字围"的效果
1、浮动元素脱离标准文档流
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
在不加浮动的情况下，蓝色的小盒子在红色的小盒子下面。
Paste_Image.png
那好，现在我给红色的小盒子加上浮动属性，看看会怎样。
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
可以发现，蓝色的盒子跑到的红色的盒子底下去了
Paste_Image.png
说明浮动的盒子“浮”起来了吧，距离用户更近了，这里的远近指的是，用户直接看到的信息，我们看到的是红色把蓝色盖住了，就说明了，红色盒子里用户距离更近一点，而蓝色的里用户的距离更远一点，可以将其看作是一个“层”。
Paste_Image.png
这里给条传送门，该作者讲的也许太详细了，看的不是很懂。
深入理解CSS中的层叠上下文和层叠顺序
再给出一个例子：
<style type="text/css">
span{
float: left;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<span></span>
Paste_Image.png
一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
2、 浮动元素在同一个层叠上下文中互相贴靠
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
这里的box1,box2是在同一个** 层叠上下文 **中，什么意思呢？就是他两目前的状态是一样的平等，不受来自其他的样式也影响。
Paste_Image.png
可以看出，两个盒子相互贴靠吧！！！
2.1、 浮动元素在同一个层叠上下文中互相贴靠-层叠上下文
现在需求有变化了，现在要在蓝色的小盒子里面，再放两个小盒子，那么他们之间该如何排列呢？
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box3{
width: 50px;
height: 50px;
background-color: gray;
}
.box4{
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
<body>
<div class="box1"></div>
<div class="box2">
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
可以发现在box2中的盒子box3,box4上下排列的吧，说明box3,box4,在box2的层叠上下文中是按照标准文档流来排列的。
那么在这里我想说的就是，box2,是box3,box4的层叠上下文，对于box1,box2来说他们的层叠上下文就是body标签。
注意：
- 在做浮动的时候一定要记得，那一个盒子是在哪一个层叠上下文中浮动，不要想当然，这个层叠上下文中的盒子和另外一个层叠上下文中的盒子来一起做浮动。
- 父盒子的浮动不影响子盒子的浮动效果，因为层叠上下文不一致了。
那么需求现在又发生了改变，希望box2中的两个小盒子也发生能并排，很简单啦，洒洒水啦！给box3,box4添加浮动效果就好了，Oh了。
.box3{
width: 50px;
height: 50px;
background-color: gray;
float: left;
}
.box4{
width: 50px;
height: 50px;
background-color: yellow;
float: left;
}
<div class="box1"></div>
<div class="box2">
<div class="box3"></div>
<div class="box4"></div>
</div>
Paste_Image.png
3、浮动元素可以实现“字围"的效果
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
color: white;
padding:20px;
margin: 20px;
float: left;
}
</style>
<div class="box">
盒子里可以放一张图片
</div>
<p>
我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容我是新闻内容
</p>
可以发现这里不对啊，按上面讲的内容来说，文字不应该跑到红色盒子底下去么，咋还产生了字围效果呢？具体什么原因，大家参考深入理解CSS中的层叠上下文和层叠顺序该篇文章，上面有介绍，比较关键的一句话意思就是，样式布局最重要的就是用户呈现内容，css不让浮动的盒子压盖文字，于是就形成了字围效果，我们经常说图片也是文字，实际上我自己测试也确实是这样的，图片也会围绕在红色区域。
Paste_Image.png
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
color: white;
padding:20px;
margin: 20px;
float: left;
}
</style>
<div class="box">
盒子里可以放一张图片
</div>
图片也环绕在盒子外围：
Paste_Image.png
在开发中国我们经常用块级元素div,li这些来做浮动的时候一定要注意，要浮动的时候就都浮动，不要单独浮动。
网友评论