float浮动布局的应用

时间：2015-01-06 21:32:30 阅读：191 评论：0 收藏：0 [点我收藏+]

标签：

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

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

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

当一个div里面含有浮动元素和非浮动元素，IE6，7中的浮动元素会出现错位现象。

解决方案： ①将浮动元素位于非浮动元素的前面。②非浮动设置为浮动元素。③浮动元素设置margin-top的负值。

（在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浮动布局的应用

标签：

原文地址：http://www.cnblogs.com/zhaojieln/p/4206923.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行