CSS中float属性

时间:2023-03-09 09:09:55
CSS中float属性

这个东西叫浮动。
顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。
正常情况下,HTML页面中块元素都是从上倒下排列的。如果想实现左右结构。
float的一种选择(当然还有其他方法)。
比如

 <div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:left;width:200px">右</div>
</div>

 这样,这个两个DIV标签就在同一行上了(同时靠左),当然有个前提,就是他们俩的父元素的宽度要至少大于400px,这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白

 <div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:right;width:200px">右</div>
</div>

 以上写法,也是在同一行。不同的是,一个靠左,一个靠右。

 这里边的两个DIV的中间有100PX的空白。

 需要注意的是,当标签使用了float属性后,就脱离了标准输出流,就不受页面约束了。这样不方便,也不利于页面布局
 所以,一般浮动之后要清除浮动

 <div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:right;width:200px">右</div>
<span style="clear:both"></span>
</div>

 这样,页面整体的布局结构就基本上没有被破坏了。