CSS 布局Float 【4】
一些浮动模型的基本知识:浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框 或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样.《CSS Mastery》里作者画了几个图非常有意思,可以帮助我们理解浮动的表现。
不浮动 <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> </div>
//红向右浮动 <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; float:right;"> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> </div>
//红框左移,覆盖绿框 <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> </div>
//都向左浮动,父元素宽度为0 <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> </div>
如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,,直到有足够的扣减,如果浮动元素的高度不同,那么下下移动的时候可能被卡住
没有足够水平空间 <div style="border: solid 5px #0e0; width:250px;"> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> </div>
卡住了 <div style="border: solid 5px #0e0; width:250px;"> <div style="height: 120px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> </div>
行框和清理
前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。
不浮动 <div style="border: solid 5px #0e0; width: 250px;"> <div style="height: 50px; width: 50px; "></div> <div style="height: 100px; width: 100px; "> 11111111111 11111111111 </div> </div>
浮动 <div style="border: solid 5px #0e0; width: 250px;"> <div style="height: 50px; width: 50px; float:left;"></div> <div style="height: 100px; width: 100px; "> 11111111111 11111111111 </div> </div>
可以看出浮动后虽然绿色div布局不受浮动影响,正常布局,但是文字部分却被挤到了红色浮动div下边。要想阻止行框围绕在浮动元素外边,可以使用clear属性,属性的left,right,both,none表示框的哪些边不挨着浮动框。
<div style="border: solid 5px #0e0; width: 250px;"> <div style="height: 50px; width: 50px; float:left;"></div> <div style="height: 100px; width: 100px; clear:both;"> 11111111111 11111111111 </div> </div>
对元素清理实际上为前面的浮动元素留出了垂直空间,这样可以解决我们之前的一个问题,看前面的图片的时候我们发现div内的所有元素浮动的话就会不占据文档空间,这样父元素,高度为0,可能很多效果也不见了,那么这个时候我们就可以使用clear属性来清楚浮动,达到我们预想的效果。
//都向左浮动,父元素宽度为0 <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> </div>
如果我们想让父元素在视觉上包围浮动元素可以向下面这样处理
在最后添加一个空div,对它清理
<div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="clear:both;"></div> </div>
当然这样做有很多缺点,有些javascript也可以做出类似效果,这里不细说,值得注意的是应用值为hidden或auto的overflow属性会有一个副作用:自动清理包含的任何浮动元素,所以说当页面出现相关问题时,可以看看是不是这个属性搞的鬼。
这样,有了这些基本知识后,我们应用CSS的时候就可以解决很多以前很百思不得其解的问题了。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。