CSS Float(浮动)
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
浮动的分类:
left: 左浮动
right: 右浮动
none: 默认值,不浮动
inhert: 继承父亲框的浮动属性
特性:
脱离标准文档流,摆脱块级元素与行内元素的限制。
自动贴靠,超出行宽时,下个同级元素自动找空隙贴靠。与浮动的元素高度相加超过浮动元素的前一个元素的高度时,才自动换行。
脱离标准文档流,却没有脱离文本流。碰到文本会出现被包围效果,称为字围效果。
收缩效果,如果父元素没有设置高度,父元素会变成内容宽高,如果没有内容,父元素消失。
使用方法
浮动:float 向左浮动:left 向右浮动:right
浮动块元素
浮动块元素如果超出设定的区域范围会自动换行,
注意:外层加标签(想要谁浮动外层加标签)并给设定区域
常见的几种方式:
元素单独浮动
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
例:如果图像是右浮动,下面的文本流将环绕在它左边:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 img 8 { 9 float:right; 10 } 11 </style> 12 </head> 13 <body> 14 <p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p> 15 <p> 16 <img src="logocss.gif" width="95" height="84" /> 17 这是一些文本。这是一些文本。这是一些文本。 18 </p> 19 </body> 20 </html>
如图所示:
彼此相邻的浮动元素
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
例如图片排序,代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .thumbnail 8 { 9 float:left; 10 width:110px; 11 height:90px; 12 margin:5px; 13 } 14 </style> 15 </head> 16 <body> 17 <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"> 18 <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"> 19 <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"> 20 <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"> 21 <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"> 22 <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"> 23 </body> 24 </html>
如图所示: