博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css float 使用
阅读量:4618 次
发布时间:2019-06-09

本文共 1366 字,大约阅读时间需要 4 分钟。

float 有三个属性left,righ,none 。 在使用float时需要注意的是float是相对于下个元素的,如两个div,第一个div float:right那么两个div就会在同一行上,第二个div会出现在右边。当然一个容器内只有一个元素的话也可以使用float,不过这样效果就类似于text-align了。

 

     相对于float的元素,其他元素的文字内容会自动围绕(wrap)它,如一个图片float:right那么同容器的文字内容就会出现在图片的左边和下面,但是背景(background color)和边框(board)却不会,它们不会在遇到float的元素时停止,为解决这个问题,可以包含背景和边框的元素的样式上添加overflow:hidden,这样背景和边框遇到float对象时就会截断。这种方法对于ie6 及其早期的浏览器存在问题,可以使用ie特有的 zoom: 1来模拟。如:

 
1
* html h2 {
2
3
zoom: 1;
4
}

 

 * html 只有ie6,更早版本的ie支持,ie7和其他的浏览器会忽略这段样式。

 

     某些情况下需要去除float效果,比如对于copyright来说它总是在页面的底部,为了使其他float元素不会影响到它,可以在copyright的样式上添加clear:both。clear有4种属性left,right,both,none。

 

     float与div合用,可以很方便的对页面进行布局 。

     一般情况都需要给float元素设置一个宽度,除非它是个图片(图片有固定的宽度),以方便它周围的其他元素定位。

还有个需要注意的是,当float的元素比包裹(wrap)它的元素短的时候,需要给wrap元素设置margin-left或者margin-right,以float元素会被wrap,导致布局混乱。如:

 

 
<
div
>
<
div
id
="sidebar"
style
="float:left; width: 120px;"
>
...
</
div
>
<
div
id
="main"
style
="margin-left:140px;"
>
...
</
div
>
</
div
>

 

 

在布局的时候margin-left也可以使用负数,如下面的情况,sidebar尽管设置了float=left,但是根据页面元素的位置它在main的后面,所以它还是不会出现在main的左边,这个时候可以设置margin-left为负数,使它定位在左边。ie6使用负数margin时会也有个double-margin的bug,解决的方法是在main元素里添加display:inline属性

 

ContractedBlock.gif
ExpandedBlockStart.gif
代码
 
<
div
>
<
div
id
="main"
style
="margin-left:140px; width: 400px;"
>
...
</
div
>
<
div
id
="sidebar"
style
="float:left; width: 120px;margin-left=-540px;"
>
...
</
div
>
</
div
>

 

 

 

 

 

转载于:https://www.cnblogs.com/aji88/archive/2010/07/09/1774547.html

你可能感兴趣的文章
图解虚拟机VMware服务自动启动
查看>>
CentOS安装Webmin
查看>>
c#访问mysql数据库
查看>>
配置iptables实现本地端口转发的方法详解
查看>>
paip.多维理念 输入法的外码输入理论跟文字输出类型精髓
查看>>
使用classList和dataset实现tab切换
查看>>
SqlServer统计最近一周的数据
查看>>
2014年第五届蓝桥杯试题C/C++程序设计B组——李白打酒
查看>>
第二章:08运算符[运算优先级]
查看>>
Wireshark 解析 自定义 加密 协议
查看>>
Extjs4 MVC Controller使用方法
查看>>
input处理函数
查看>>
同一套代码部署到两台机器上,只有一台机器上的页面中文乱码
查看>>
第8次作业
查看>>
白日焰火,虽然绚烂,但也短暂。
查看>>
找不到regionserver的问题总结
查看>>
设计模式开篇综述(Java)
查看>>
Java基础——集合(持续更新中)
查看>>
《五》包装流
查看>>
CUDA 关于 BLOCK数目与Thread数目设置
查看>>