前端CSS浮动布局

浮动布局关键字float

以下面的代码作为一个例子

若要在一个div中实现图片在左，文字在右的样式，可通过以下代码进行效果样式的实现，img表示图片，one表示文字。

CSS代码如下：

.main .inner .left img{
         float: left;
     }

图片CSS中使用float:left浮动在左侧。

.main .inner .left .one{
         width: 538px;
         float: right;
         line-height: 24px;
         color: #7f7f7f;
     }

文字CSS中使用float:right浮动在右侧。

同时，需要注意的是，使用浮动布局时浮动的元素默认在网页中不占位置，但是会挤到对应的文字，这一点可能会对后面的页面布局产生影响，若要消除浮动的影响，则应在相应css中添加如下代码即可。

clear: both;