本文共 1731 字，大约阅读时间需要 5 分钟。

今天我们接着分享关于浮动布局的内容。

清除浮动clear：

在css中，清除浮动是在定义了浮动元素之后设置的。

语法：

clear:取值；

一般情况，使用clear属性清除浮动时，很少会“clear：left”或者“clear right”来判断清除左浮动，还是清除右浮动，直接会使用clear：both。

示例代码：

          
   
          #father {          width:400px;        background-color:#0c6a9d;        border: 1px solid silver;      }      #father div {          padding:10px;        margin:15px;        border:2px dashed red;        background-color: #fcd568;      }      #father p {          margin:15px;        border:2px dashed red;        background-color: #fcd568;      }      #box1 { float:left;}      #box2 { float:left;}      p { clear:both;}            
    
           
     
      box1
     
    
      
    
     box2
    
      
    
我是浮动外围的文字
      
   

预览效果后，我们发现由于p元素清除了浮动，所以p元素的前一个元素产生的浮动就不会对后续元素产生影响了。

定位布局：

浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得精准定位页面中的任意元素成为可能。

CSS定位使你可以将一个元素精确地放在页面上你指定的位置。

定位布局共有四种方式。

固定定位fixed，相对定位relative，绝对定位absolute，静态定位static。

固定定位fixed：

在CSS中，固定定位是最直观，最容易理解的定位方式。当元素的position属性设定为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。

语法：

​​​​​​​

position:fixed；top:像素值；bottom：像素值；left：像素值；right：像素值；

“position：fixed”，结合top，bottom，left，right这4个属性使用。

示例代码：

​​​​​​​

                  
   
    无定位的元素    
    
     固定定位的元素
    
  
   

预览效果时，我们可以把窗体缩小刚好埋没过div元素，然后拖动滚动条，就可以看到，固定定位div在屏幕的位置像是固定住了。

相对定位relative：

采用相对定位的元素，其位置是相对于它的原始位置计算而来的。

语法：

​​​​​​​

position:relative;top:像素值；bottom：像素值；left：像素值；right：像素值；

“position:relative”，是结合top、bottom、left、right这4个属性一起使用。相对定位的容器浮上来后，其后所占的位置仍留有空位，后面的无定位元素不会挤上来。

提醒一下，默认情况下，相对定位元素的位置是相对于原始位置而言，而固定定位元素的位置是相对于浏览器而言的。

示例代码：

​​​​​​​

                  
   
          
    
     无定位的元素
    
      
    
     相对定位的元素
    
      
    
     无定位的元素
    
      
   

从效果中可以看出，相对定位是对于本元素的原始位置而言的，也就是从原始位置需要偏离出多少。