首页 / CSS / CSS学习之float解析
CSS学习之float解析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS学习之float解析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5908字，纯文字阅读大概需要9分钟。
内容图文
转自：http://www.w3cplus.com/css/float.html
一、float是什么？
float即为浮动，在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念：
- 文档流：在html中文档流即为元素从上至下排列的顺序。
- 脱离文档流：元素从正常的排列顺序被抽离。
- 最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。
二、float造成的影响
2.1 对其父元素的影响
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷，效果如下所示。
html代码：
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
title
>css学习之float解析</title><style>
.divBox{ border:solid 1px red; width: 350px; padding: 20px;}
.divBox-01{ background-color: blue; border:solid 1px #ccc; width: 100px; height: 100px;}
.fl{ float: left;}/*左浮动*/</style></head><body><div class="divBox"><div class="divBox-01 fl"></div></div></body></html>
2.2 对其兄弟元素（非浮动）的影响
2.2.1 如果兄弟元素为 块级元素
在现代浏览器和IE8+下，该元素(即兄弟元素)会忽视浮动元素而占据它的位置，并且会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
需要注意的是，在IE 6、7下则分别都有不同的表现，IE 6、7中，该兄弟元素会紧跟在浮动元素的右侧，并且在IE6中两者之间留有3px的空隙。这就是著名的“IE 3px bug”.
html代码：
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="UTF-8"
>
<
title
>css学习之float解析</title><style>
.divBox{ border:solid 1px red; width: 350px; padding: 20px;}
.divBox-01{ background-color: blue; width: 100px; height: 100px;}
.divBox-02{ background-color: orange; width: 200px; height: 200px;}
.fl{ float: left;}/*左浮动*/</style></head><body><div class="divBox"><div class="divBox-01 fl"></div><div class="divBox-02">我是块级兄弟元素</div></div></body></html>
现代浏览器及ie8+：
ie7:
ie6:
2.2.2 如果兄弟元素为 内联元素
则元素会环绕浮动元素排列。
...
<
style
>
.divBox
{
border
:
solid 1px red
;
width
:
350px
;
padding
:
20px
;
}
.divBox img
{
width
:
230px
}
.divBox-01
{
background-color
:
blue
;
width
:
100px
;
height
:
100px
;
}
.fl
{
float
:
left
;
}
/*
左浮动
*/
</
style
>
</
head
>
<
body
>
<
div
class
="divBox"
>
<
div
class
="divBox-01 fl"
></
div
>
<
img
src
="images/1.jpg"
alt
=""
>
</
div
>
</
body
>
2.3 对其兄弟元素（兄弟元素为浮动）的影响
2.3.1 同一个方向的浮动元素：
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面。
可以用这样一个形象的比喻来描述： 在一个购票中心，某人从一条购票队列跑到旁边的一条购票队列中排队，那自然先跑过去的会先占据前面的位置。
但这条购票队列还是位于当前的购票中心中 ，因此这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。
...
<
style
>
.divBox
{
border
:
solid 1px red
;
width
:
350px
;
padding
:
20px
;
}
.divBox-01
{
background-color
:
blue
;
width
:
100px
;
height
:
100px
;
}
.divBox-02
{
background-color
:
orange
;
width
:
100px
;
height
:
100px
;
}
.fl
{
float
:
left
;
}
/*
左浮动
*/
</
style
>
</
head
>
<
body
>
<
div
class
="divBox"
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-02 fl"
></
div
>
</
div
>
</
body
>
2.3.2 反向的浮动元素：
正如上面的比喻所述，我们可以假设购票中心里左右两边的各有一个购票点（如图,这里我们把一个div看做一个购票者），左浮动的队列可看做左购票点的购票 队列，反方向的浮动（即右浮动）则是右边购票点的购票队列，所以在购票中心足够宽的时候两条队列的人群是互不受影响的，因此他们在同一条水平线上。
但当购票中心过窄或者左右两边的购票队列过长时，其中一条队列则会另起一行排列（此处为B队列，有人可能会问为什么不是A队列另起一行？从下面HTML结 构上可知，这是因为在时间上，A队列比B队列更早地建立，根据先到先得的原则，B队列的购票者在位置不够的时候自然要另起了一行了）。
...
<
style
>
.divBox
{
border
:
solid 1px red
;
width
:
350px
;
padding
:
20px
;
}
.divBox-01
{
background-color
:
blue
;
width
:
100px
;
height
:
100px
;
border
:
1px solid #333
;
}
.divBox-02
{
background-color
:
orange
;
width
:
100px
;
height
:
100px
;
border
:
1px solid #333
;
}
.fl
{
float
:
left
;
}
/*
左浮动
*/
.fr
{
float
:
right
;
}
/*
右浮动
*/
</
style
>
</
head
>
<
body
>
<
div
class
="divBox"
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-02 fr"
></
div
>
<
div
class
="divBox-02 fr"
></
div
>
</
div
>
</
body
>
当同一行中连一个购票者的位置都容不下时，两条队列则会错开两行
<
style
>
.divBox
{
border
:
solid 1px red
;
width
:
350px
;
padding
:
20px
;
}
.divBox-01
{
background-color
:
blue
;
width
:
100px
;
height
:
100px
;
border
:
1px solid #333
;
}
.divBox-02
{
background-color
:
orange
;
width
:
100px
;
height
:
100px
;
border
:
1px solid #333
;
}
.fl
{
float
:
left
;
}
/*
左浮动
*/
.fr
{
float
:
right
;
}
/*
右浮动
*/
</
style
>
</
head
>
<
body
>
<
div
class
="divBox"
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-02 fr"
></
div
>
<
div
class
="divBox-02 fr"
></
div
>
</
div
>
</
body
>
2.4 float对自身元素的影响
float对象将被视作块对象(block-level)，即display属性等于block。
2.5 float对子元素的影响
我们知道当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
...
<
style
>
.divBox
{
border
:
solid 1px red
;
padding
:
20px
;
} /*此处，去掉了固定宽度值*/
.divBox-01
{
background-color
:
blue
;
width
:
100px
;
height
:
100px
;
border
:
1px solid #333
;
}
.fl
{
float
:
left
;
}
/*
左浮动
*/
.fr
{
float
:
right
;
}
/*
右浮动
*/
</
style
>
</
head
>
<
body
>
<
div
class
="divBox"
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-01 fl"
></
div
>
</
div
>
</
body
>
当我们给外层的divBox加上浮动后：
<
div
class
="divBox fl"
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-01 fl"
></
div
>
</
div
>
当divBox内部既有浮动元素，又有非浮动元素时：
<
style
>
.divBox
{
border
:
solid 1px red
;
padding
:
20px
;
}
.divBox-01
{
background-color
:
blue
;
width
:
100px
;
height
:
100px
;
border
:
1px solid #333
;
}
.divBox-02
{
background-color
:
orange
;
width
:
260px
;
height
:
160px
;
border
:
1px solid #000
;
}
.fl
{
float
:
left
;
}
/*
左浮动
*/
</
style
>
</
head
>
<
body
>
<
div
class
="container"
>
<
div
class
="divBox fl"
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-01 fl"
></
div
>
<
div
class
="divBox-02"
></
div
>
</
div
>
</
div
>
未完待续...
原文：http://www.cnblogs.com/lvmylife/p/5410516.html
内容总结
以上是互联网集市为您收集整理的CSS学习之float解析全部内容，希望文章能够帮你解决CSS学习之float解析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。