首页 > 代码库 > float浮动布局的应用

float浮动布局的应用

2024-10-26 08:57:39   220人阅读

  1. 一个浮动（左浮动或右浮动）
  2. 垂直环绕布局（浮动和清除浮动）
  3. 左右两列布局

注意：网页设计中应该尽量避免使用浮动

1、一个浮动（左浮动或右浮动）

当一个div里面含有浮动元素和非浮动元素，IE6，7中的浮动元素会出现错位现象。
解决方案：  ①将浮动元素位于非浮动元素的前面。②非浮动设置为浮动元素。③浮动元素设置margin-top的负值。
 
<div class="title"><span>新闻列表</span><a href="javascript:;" class="r">更多</a> </div>
技术分享 （在firefox、chrome、ie8+浏览器表现正常）
技术分享
 
2、垂直环绕布局（浮动和清除浮动）
.touxiang{ width:100px; height:100px; background-color: #dcdcdc; display: inline-block;}
<div class="ovh">
      <span class="touxiang l">头像</span>        （左浮动）
      <span class="l cll">姓名</span> 　　　　　　 （左浮动，清除左浮动）
      <div class="bde" style="margin-left: 120px;">自我描述</div>    （没有浮动）
</div>
运行效果：
技术分享
 
3、左右两列布局
wer
 

float浮动布局的应用


联系
我们