div+css里面左浮动 右浮动 到底是什么意思??
浮动我们可以这样理解,就是元素的居左居右问题,
都是相对于父元素进行的浮动,确切来说就是在这个元素的左边或者右边位置;
我们用代码实现左浮动,建设父子元素,把父元素设置为300PX的宽高,
子元素设置100PX的宽高,然后把子元素(div2)左浮动一下,代码:float:left;
实现效果如下,DIV2在div1的左方,
其它代码不变,我们只需要把浮动的代码更改一下,就可以实现右浮动了,float:right;
下图实际效果我们可以看到DIV实现了右浮动,浮动至右边;
css浮动扩展定义
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动。
注意:
浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。
浮动元素后边的非浮动元素显示问题。
多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度。
子元素全为浮动元素的元素高度自适应问题。
2013-04-06
left:对象浮在左边 right:对象浮在右边 clear 清楚左,,右 浮动。。。
例如下面的代码:
<div id="container" >
<div id="left"></div>
<div id="right“></div>
<div id="bottom></div>
</div>
此时left right bottom 3个div 是从上到下排列,如果我们给left 添加一个浮动属性 float:left,那么3个div会从左到右排列,这是因为left 的浮动也会影响到后面的对象,如果我们给bottom 添加一句clear:both,那么bottom就不会再排在right的右边了,这是因为我们用clear:both清除了前面浮动对象对bottom的影响
浮动的元素会把不浮动挤开。
广告 您可能关注的内容 |