CSS定位与浮动：相对定位、绝对定位、浮动布局

本文主要介绍CSS中的定位与浮动布局，包括相对定位、绝对定位和浮动布局的使用方法及注意点。

CSS相对定位

CSS相对定位是指元素相对于自身原来的位置进行定位，不会对其他元素造成影响。使用相对定位需要使用position:relative;属性。

使用示例：

div {
    position: relative;
    left: 20px;
    top: 30px;
}

如上代码表示将div元素相对于原来位置向右移动20px，向下移动30px，效果如下图所示：

CSS绝对定位

CSS绝对定位是指元素相对于其父元素进行定位，如果没有父元素，则相对于body元素。使用绝对定位需要使用position:absolute;属性。

使用示例：

div {
    position: absolute;
    left: 20px;
    top: 30px;
}

如上代码表示将div元素相对于其父元素向右移动20px，向下移动30px，效果如下图所示：

CSS浮动布局

CSS浮动布局是指通过float属性将元素向左或向右浮动，使得元素脱离文档流并可以与其他元素并排显示。使用浮动布局需要使用float:left/right;属性。

使用示例：

div {
    float: left;
}

如上代码表示将div元素向左浮动，效果如下图所示：

注意：浮动元素会对其后面的元素造成影响，需要使用clear:both;属性进行清除浮动，避免影响后面元素的布局。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS盒子模型：内边距、边框、外边距、定位
• 下一篇： CSS布局技巧：栅格系统、多列布局、居中布局