div css float浮动用法(left right)

Posted 2023-05-02

float是什么意思？
float的作用？？
float语法： ？？

float是浮动，翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。
float的作用：通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。
float语法 ：
Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
Float浮动用于设置对象靠左与靠右浮动样式，可以实现我们所需要的让DIV、SPAN等标签居左居右浮动。
简单使用语法
divfloat:left /* css注释：设置div对象浮动靠左（left） */
divfloat:right /* css注释：设置div对象浮动靠右(right) */ 参考技术A float是什么意思？
float是浮动，翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。
float的作用
通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。

Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
float语法：
float : none | left |right
参数值：
none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

Float浮动结构分析图
接下来我们来通过一个div+css实例讲解float使用技巧。

DIV设置浮动float以后下一个DIV要换行的方法

《div style=“float:left;”》 1111111 《/div》

《div style=“float:left;”》222222 《/div》

《div 》33333333《/div》

 

1111111 和222222  在同一行，接下来的33333333虽然没有float:left的属性，但是也会在同一行，

要想让33333333不在同一行怎么办呢，答案很简单就是加入clear:both;

《div style=“clear:both;”》33333333《/div》

这样就可以了解决div换行问题了。在div同一行设置之后进行换行。同样如果div之后是table的也可以。如下代码：

<div style="float:left;"> 1111111 </div>
<div style="float:left;">222222 </div>
<table style="clear:both">
<tr><td>tttttt</td></tr>
</table>

如果div后面是文本框或按钮之类的，

<div style="float:left;">页面内容</div><input type=text value=文本框 />

<div style="float:left;">页面内容</div><button>提交</button>

则无法在文本框或按钮上用style="clear:both"，所以可以使用如下方法：

①在div后面是一<br />进行换行，如：<div style="float:left;">页面内容</div><br /><input type=text value=文本框 />

②在浮动的div后面增加一个空div并设置clear样式属性，如：<div style="float:left;">页面内容</div><div style="clear:both"></div><button>提交</button>

这样就可以解决浮动DIV换行的问题了。

参考出处：

http://blog.sina.com.cn/s/blog_6721f25c0101i1tk.html

http://www.jb51.net/css/221269.html