CSS浮动和定位

最新推荐文章于 2023-11-07 16:47:17 发布

nx2000223

最新推荐文章于 2023-11-07 16:47:17 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/nx2000223/article/details/117589527

版权

CSS浮动属性简介

CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧
loat 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动
float 属性的常用值包括:

left 靠左浮动
right 靠右浮动
none 不浮动

CSS左右浮动

HTML 正常文档流

<style type="text/css">    
div{            
    width:100px;            
    height:50px;            
    line-height: 50px;            
    text-align: center;              
    margin:10px;                  
}        
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;        
}    
.box-3 {            
    border: 3px solid green;        
}
</style>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div

运行结果：块级元素,每个div独占一行

CSS靠左浮动

<style type="text/css">    
div{            
    width:100px;            
    height:50px;            
    line-height: 50px;            
    text-align: center;              
    margin:10px;
    float:left;                  
}        
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;        
}    
.box-3 {            
    border: 3px solid green;        
}
</style>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>

运行结果：有 div 排列在一行（靠左浮动）

CSS清除浮动

<style type="text/css">    
div{            
    width:100px;            
    height:50px;            
    line-height: 50px;            
    text-align: center;              
    margin:10px;
    float:left;                  
}        
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;        
}    
.box-3 {            
    border: 3px solid green;
    clear:both;         
}
</style>

运行结果：第3个box不再靠左浮动

CSS定位属性简介

CSS 中 position 规定了元素的定位方式
CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置
position 属性的可选值包括:

relative 相对定位
absolute 绝对定位
fixed 固定定位
static 默认值

CSS相对定位

HTML 正常文档流

<style type="text/css">    
div{            
    width:100px;            
    height:50px;            
    line-height: 50px;            
    text-align: center;              
    margin:10px;
    float:left;                  
}        
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;        
}    
.box-3 {            
    border: 3px solid green;
    clear:both;         
}
</style>

运行结果：块级元素,每个div独占一行

CSS 相对定位

不脱离文档流布局，只改变自身的位置，文档流原位置遗留空白区域，定位的起始位置为此元素原文档流的位置

<style type="text/css">
…    
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;
    position: relative;            
    top:20px;            
    left:30px;        
}    
</style>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>

运行结果:

CSS绝对定位

HTML正常文档流：

<style type="text/css">    
…
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;        
}
.box-3 {            
    border: 3px solid green;        
}    
</style>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>

运行结果：块级元素,每个div独占一行

CSS 绝对定位

脱离文档流布局，遗留下来的空间由后面的元素填充，定位的起始位置为最近的父元素(position不为static)，否则为Body文档本身

<style type="text/css">
…
.box-2 {            
    border: 3px solid blue;
    position: absolute;            
    top:40px;            
    left:50px;        
}
…
</style>
<body>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div> 
</body>

运行结果：