CSS Float页面布局属性详解

float属性可以控制页面是否浮动,以及浮动的方式。这里需要说明的是,如果被定义成绝对定位(position:absolute),则会忽略float的浮动类型。

控制页面浮动方式的float属性包含下面4种值:


float:{ left | right | none | inherit }

代码

<div class="nav">
<a href="home">首页</a>
<a href="about">关于我们</a>
<a href="contact">联系我们</a >
</div>

为了方便演示,我们定义了body的背景颜色、宽度、行高、边距等。


body{
line-height: 160%;
width: 468px;
margin-right: auto;
margin-left: auto;
margin-top: 60px;
background-color: #003366;
}

//定义类nav的浮动方式。
.nav {
background-color: #FFFFFF;
float: left;
width: 200px;
padding: 10px;
}

演示图样css-float-property

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

无觅相关文章插件,快速提升流量

任鸟飞网页设计博客 谜题推理 No.1 Web Design Gallery IndustryIdea LookForDesign AWebGallery Mobile Web Template iDesign Wallpaper Big Funny Picture iPhone Faves iPhone Mobi iPad Faves Android Faves BlackBerry Faves Best Design Magazine All Banner Templates Blog Earn Tips 是谁啊 只爱美人 家乡美 唯美爱 美人衣妆 AutoCAD 2D | Pro/E 3D江苏名企The HTML5 Templates