- 1、本文档共10页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
css中float使用大全
float是什么?浮动在CSS中的作用
dadafloat即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念:
文档流:在html中文档流即为元素从上至下排列的顺序。
脱离文档流:元素从正常的排列顺序被抽离。
最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding)。
float造成的影响
对其父元素的影响
对于其父元素来说,元素浮动之后,它脱离当前正常的文档流,所以它也无法撑开其父元素,造成父元素的塌陷,效果如下图所示。
#wrapper{padding:20px;border:1px solid red;width:350px;}
.floatL{width:100px;height:100px;border:1px solid #000;float:left;}
.floatR{width:100px;height:100px;border:1px solid #000;float:right;}
.blue{background:#6AA;}.red{background:#A66;}
div id=wrapper
div class=floatL blueAAAAAAAA/div
/div
对其兄弟元素(非浮动)的影响
如果兄弟元素为?块级元素
在现代浏览器和IE8+下,该元素会忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素。
需要注意的是,在IE 6、7下则分别都有不同的表现,IE 6、7中,该兄弟元素会紧跟在浮动元素的右侧,并且在IE6中两者之间留有3px的空隙。这就是著名的“IE 3px bug”
/*CSS,其他的样式按照上面给出的,此处就不再重复了*/
.block{width:200px;height:150px;border:1px solid #000;background:#CCC;}
div id=wrapper
div class=floatL blueAAAAAAAA/div
div class=blockBBBBBBBBB/div
/div
IE 8:
IE 6:
IE 7:
如果如果兄弟元素为?内联元素
则元素会环绕浮动元素排列。
div id=wrapper
div class=floatL blueAAAAAAAA/div
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文??文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
/div
div id=wrapper
div class=floatL blueAAAAAAAA/div
img src=XXX.png
/div
对其兄弟元素(浮动)的影响
1).同一个方向的浮动元素:
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时,它会紧跟在它们后面,可以用这样一个形象的比喻来描述:?在一个购票中心里,某人从一条购票队列跑到旁边的一条购票队列中排队,那自然先跑过去的会先占据前面的位置。但这条购票队列还是位于当前的购票中心中?,因此这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。
div id=wrapper
div class=floatL redAAAAAAAA/div
div class=floatL blueBBBBBBBBBB/div
/div
2).反方向的浮动元素:
正如上面的比喻所述,我们可以假设购票中心里左右两边的各有一个购票点(如图,这里我们把一个div看做一个购票者),左浮动的队列可看做左购票点的购票队列,反方向的浮动(即右浮动)则是右边购票点的购票队列,所以在购票中心足够宽的时候两条队列的人群是互不受影响的。因此他们在同一条水平线上
div id=wrapper
div class=floatL redAAAAAAAA/div
div class=floatR blueBBBBBBBBBB/div
/div
但当购票中心过窄或者左右两边的购票队列过长时,其中一条队列则会另起一行排列(此处为B队列,有人可能会问为什么不是A队列另起一行?从下面HTML结构上可知,这是因为在时间上,A队列比B队列更早地建立,根据先到先得的原则,B队列的购票者在位置不够的时候自然要另起了一行了)。
div id=w
文档评论(0)