频道导航

CSS布局最常用属性float（浮动）和position（定位）

2019-02-07 CSS 前端之家

前端之家收集整理的这篇文章主要介绍了CSS布局最常用属性float（浮动）和position（定位），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position。这两个属性的理解对CSS网页布局的学习非常重要。我们52CSS.com就这两个属性的相关知识与实例，发布本文，希望对您的工作学习有帮助。<span style="color: red">首先了解float（浮动）和position（定位）属性的基础知识：float（浮动）属性：　　float:none|left|right 　　取值：　　　　none: 默认值。对象不飘浮　　　　left: 文本流向对象的右边　　　　right: 文本流向对象的左边 float（浮动）属性的一个实例（一行两列）： <div class="UBBPanel">
<div class="UBBTitle">

div css xhtml xml Example Source Code

HTML代码:

CSS代码:#wrap{width:100px; margin:0 auto;} #column1{float:left;width:40px;} #column2{float:right;width:60px;} .clear{clear:both;}

position（定位）属性：　　position:static|absolute|fixed|relative　　取值：　　　　static: 默认值。无特殊定位，对象遵循HTML定位规则　　　　absolute: 将对象从文档流中拖出，使用left，right，top，bottom等属性　　　　　　　　相对于其最接近的一个最有定位设置的父对象进行绝对定位。　　　　　　　　如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义　　　　fixed: 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范　　　　relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 position（定位）属性的一个实例（一行两列）：

HTML代码:

css代码:#wrap{position:relative;width:300px;} #column1{position:absolute;top:0;left:0;width:200px;} #column2{position:absolute;top:0;right:0;width:100px;}

float（浮动）和position（定位）属性的区别　　显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！在局部可能会用到position进行定位！请参考52CSS.com更多相关文章：　　DIV CSS布局：CSS浮动float属性详解　　　　CSS Float Layout Basics - CSS浮动布局基础　　　　CSS中Float（浮动）相关文摘　　　　Div+CSS教程：如何闭合浮动元素？　　　　CSS定位属性的应用　　单行一列

两行一列

三行一列

单行两列

两行两列

三行两列

单行三列（绝对定位）

float定位

css代码:#wrap{width:300px;} #column{float:left;width:200px;} #column1{float:left;width:120px;} #column2{float:right;width:80px;} #column3{float:right;width:100px;} .clear{clear:both;}

原文链接：https://www.f2er.com/css/70647.html