float属性的值可以是left、right或者none。
用两个例子来说明吧:
1 图文混排
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
#picture {
float:left;
width: 100px;
}
2 一行两列
xhtml代码:
Example Source Code
<div id="wrap">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
/*这是违背web标准意图的,只是想说明在它下面的元素需要清除浮动*/
</div>
CSS代码:
Example Source Code
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}
一般地,float要和clear一起使用!
clear属性
CSS属性clear
用于控制浮动元素的后继元素的行为。
缺省地,后继元素将向上移动,以填补由于前面元素的浮动而空出的可用空间。在前面的例子中,文本自动上移到了比尔盖茨的图片旁。
clear
属性的值可以是left、right、both或none。原则是这样的:如果一个盒子的clear
属性被设为“both”,那么该盒子的上边距将始终处于前面的浮动盒子(如果存在的话)的下边距之下。
显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局!
两行一列
Example Source Code
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
三行一列
Example Source Code
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
单行两列
Example Source Code
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
两行两列
Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
三行两列
Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}
单行三列
绝对定位
Example Source Code
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}
float定位一
xhtml代码:
Example Source Code
<div id="wrap">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
/*用法web标准不建议,但是记住下面元素需要清除浮动*/
</div>
<divid="column3">这里是第三列</div>
/*用法web标准不建议,但是记住下面元素需要清除浮动*/
</div>
CSS代码:
Example Source Code
#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}
</div>
<div id="left"class="column">
<h2>Thisistheleftsidebar.</h2>
</div>
<div id="right"class="column">
<h2>Thisistherightsidebar.</h2>
</div>
CSS代码:
Example Source Code
body{
margin:0;
padding-left:200px;/*LCfullwidth*/
padding-right:190px;/*RCfullwidth CCpadding*/
min-width:200px;/*LCfullwidth CCpadding*/
}
.column{
position:relative;
float:left;
}
#center{
width:100;
}
#left{
width:200px;/*LCwidth*/
right:200px;/*LCfullwidth*/
margin-left:-100;
}
#right{
width:190px;/*RCwidth*/
margin-right:-100;
}
分享到:
相关推荐
DIV+CSS布局:CSS浮动float属性详解 不解释
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
DIVCSS布局:CSS浮动float属性详解
高清 有书签,文字版。
CSS浮动属性Float详解 什么是CSS Float?
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:...
当元素设置浮动(float)后会被移出文档流,相信大家都会经常遇到这样的问题。 这问题的解决办法有N种之多,因为每种浏览器对CSS的解析各异,所以在不同浏览器使用清除浮动的元素也会有所不同。 我认为目前还没有最好...
如果一个没有设定高度的不浮动元素的子元素浮动,则该元素的高度不会包括浮动子元素的高度,而只会包含其内部不浮动元素的高度,因为浮动元素不属于常规流向,它脱离了文档流。因此如果要元素能够自动包含浮动子...
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助...
笔记:浮动属性float的应用的全部源代码。
CSS浮动属性Float详解[收集].pdf
5:float元素块状化 6:float流体布局 6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定 6.4:智能布局 1:float属性 float,顾名思义是漂浮,浮动的意思。但是在css...
CSS专家Eric A.Meyer他招牌式的智慧和无与伦比的经验引领读者探索了CSS的各个部分,包括属性、标记、特性和实现。此外,他还就现实应用中的一些问题,例如浏览器的支持和设计方针,发表了看法。