自贡网站建设公司

CSS布局中float和position属性使用技巧

你对CSS布局中浮动float和定位position属性的使用是否熟悉，这两个属性的理解对CSS网页布局的学习非常重要，这里和大家分享一下。

十多年的唐山网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整唐山建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“唐山网站设计”,“唐山网站推广”以来，每个客户项目都认真落实执行。

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

在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position。这两个属性的理解对CSS网页布局的学习非常重要。我们就这两个属性的相关知识与实例，发布本文，希望对您的工作学习有帮助。

首先了解float（浮动）和position（定位）属性的基础知识：

float（浮动）属性：

　　float:none|left|right

       ◆取值：
　　　　none:默认值。对象不飘浮
　　　　left:文本流向对象的右边
　　　　right:文本流向对象的左边

float（浮动）属性的一个实例（一行两列）：

ExampleSourceCode

xhtml代码: 

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2. 这里是***列
 
  • 这里是第二列
    •  
    •  
  •  
  •  

     CSS代码:

     
 
 
      
  
  
  
    1. #wrap{width:100px;margin:0auto;}  
      2. 
  
  
  
    2. #column1{float:left;width:40px;}  
      3. 
  
  
  
    3. #column2{float:right;width:60px;}  
      4. 
  
  
  
    4. .clear{clear:both;}  
      5. 
  
  
  
    5.  
      6.

    position（定位）属性：

    　　position:static|absolute|fixed|relative

    　　◆取值：

    　　　　◆static:默认值。无特殊定位，对象遵循HTML定位规则

    　　　　◆absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性

    　　　　　　　　相对于其最接近的一个最有定位设置的父对象进行绝对定位。
    　　　　　　　　如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义

    　　　　◆fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

    　　　　◆relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

    position（定位）属性的一个实例（一行两列）：

    ExampleSourceCode

    xhtml代码: 

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2. 这里是***列 
      3. 
  
  
  
    3. 这里是第二列 
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  
      6.

     CSS代码:

     
 
 
      
  
  
  
    1. #wrap{position:relative;width:300px;}  
      2. 
  
  
  
    2. #column1{position:absolute;top:0;left:0;width:200px;}  
      3. 
  
  
  
    3. #column2{position:absolute;top:0;right:0;width:100px;}  
      4. 
  
  
  
    4.  
      5.

    float（浮动）和position（定位）属性的区别

    　　显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！在局部可能会用到position进行定位！
    　
    【编辑推荐】

    1. 探究CSS网页布局中form表单语义结构
    2. 四种方法轻松实现CSS隔行换色
    3. 常用12种CSS BUG解决方法与技巧
    4. 提高CSS文件可维护、可读性四大技巧
    5. CSS Sprites对CSS布局的意义及优缺点

    网站栏目：CSS布局中float和position属性使用技巧
    网页URL：http://www.jxruijie.cn/article/ccocpoh.html

    其他资讯