元素添加 float之后，此浮动元素会在其遇到父级元素边框可能另一个浮动元素边框，紧邻其后显示。譬喻下边的例子，在浮动元素总宽度大于父级元素时，换行，换行的时候碰着前一个float并在其后显示
复制代码 代码如下:
<style>
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
}
.box1{
width:100px;
height:100px;
background-color:red;
float:left
}
.box2{
width:100px;
height:50px;
background-color:blue;
float:left
}
.box3{
width:400px;
height:50px;
background-color:green;
float:left
}
</style>
执行功效：
假如利用inline-block,功效会是奈何呢？
复制代码 代码如下:
<style>
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
}
.box1{
width:100px;
height:100px;
background-color:red;
display:inline-block
}
.box2{
width:100px;
height:50px;
background-color:blue;
display:inline-block
}
.box3{
width:400px;
height:50px;
background-color:green;
display:inline-block
}
</style>
执行功效：
此时框3是另起一行而不是跟在框1之后，(1,2之间的偏差这里就不说了) 这也是一个利用inline-block和float的判定，假如模块宽度纷歧样利用float排版大概会导致跟预想功效纷歧样，所以在宽高稳定的环境下利用float是极好的，假如纷歧致的话需要看详细的机关，利用得当的属性。
以下贴代码，只贴修改的部门，其他稳定，布局稳定。
假如去掉box3的float：left会是什么功效？凭据领略，浮动元素不占据空间，也就是框框3会无视框框1，框框2直接紧邻父元素的边框显示，也就是框框1会挡住框框3?那功效呢？
复制代码 代码如下:
.box3{
width:100px;
height:50px;
background-color:green;
}
执行功效：
为何框3的文字会呈此刻下边而不是被框1包围？接着看代码，看图
复制代码 代码如下:
.box3{
height:50px;
background-color:green;
}
执行功效：
看出纷歧样了没？是的。box3没有界说width;去掉了width,不界说宽度的环境下默认宽度就是父元素的宽度，也就是说此时width:500px;浮动元素包围非浮动元素，也就是框3前边200px的宽度被浮动元素包围了，之所以文字没有被包围并且文字被浮动元素挤在200px之后的位置，原因呢？
浮动元素不会占据块的空间，所以框三就是100%的父容器宽度 500px，可是浮动元素会占据别的的空间，也就是行框空间，通俗的讲就是文本所占的空间。
这也是图片float之后，文本会自动环抱图片的原因。浮动元素不占据块级空间，但会影响块级元素之内的文字以及内联元素。
如此的话假如想要三个框宽度一样，那么只需要将框三width:300px;
复制代码 代码如下:
.box3{
width:300px;
height:50px;
background-color:green;
}
执行功效：
到这里根基的浮动说完了，那就要说说问题了，浮动固然好用，可是也会在实际中呈现许多问题。譬喻：