都是相对于父元素进行的浮动,确切来说就是在这个元素的左边或者右边位置;
我们用代码实现左浮动,建设父子元素,把父元素设置为300PX的宽高,
子元素设置100PX的宽高,然后把子元素(div2)左浮动一下,代码:float:left;
实现效果如下,DIV2在div1的左方,
其它代码不变,我们只需要把浮动的代码更改一下,就可以实现右浮动了,float:right;
下图实际效果我们可以看到DIV实现了右浮动,浮动至右边;
css浮动扩展定义
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动。
注意:
浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。
浮动元素后边的非浮动元素显示问题。
多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度。
子元素全为浮动元素的元素高度自适应问题。
参考资料:http://www.jb51.net/css/33740.html
浮动和清除浮动一般用在DIV+CSS布局时,通常情况下使用DIV+CSS布局,文档中的对象都是从上自下依次排列,比如你写
那么默认情况下id为b 的div 排在 a的下方,我们称这种布局为标准流,设置浮动后对象就脱离了标准流,就像水面上的漂浮物一样,不再严格的按照标准流排列。浮动的取值如下:左右浮动就是紧挨着最左边或者最右边的元素的意思,如果这行宽度不够,放不下了,会自动放到下面一行显示。
浮动的元素会把不浮动挤开。
float:left;或者float:right;是去掉div后边的换行符的