【前端】浮动和定位

末蓝、 2023-10-09 10:36 4阅读 0赞

# 浮动和定位 #

## 浮动 ##

### 什么是浮动？ ###

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。它可以让任何盒子可以在一行排列，用浮动来布局。

在css中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>元素向左浮动</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>元素向右浮动</td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>元素不浮动（默认值）</td> 
  </tr> 
 </tbody> 
</table>

### 浮动的特性 ###

脱离标准流，不占位置，浮动只有左右浮动

一般只要一浮动就创建一个包含块级的概念，一般要在外边添加一个父盒子，然后对齐，但是不会超过其内边距

如果上一个元素浮动则会与其在顶部对齐，如果上一个元素是标准流则上下排列

目的：为了让多个块级元素可以在一行显示

### 清除浮动 ###

#### 为什么要清除浮动？ ####

由于浮动元素不占鱼原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就要在该元素中清除浮动

准确来说，不是清除浮动而是清除浮动后造成的影响

#### 其清除浮动的本质 ####

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题

父盒子没有给高度就不会撑开盒子

##### 办法： #####

一、在css中，clear属性用于清除浮动，其语法格式为：

选择器{clear:属性值;}

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>不允许左侧有浮动元素（清除左侧浮动的影响）</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>不允许右侧有浮动元素（清除右侧浮动的影响）</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>同时清除左右两侧浮动的影响</td> 
  </tr> 
 </tbody> 
</table>

二、添加额外标签

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>，或则其他标签br等亦可。

添加许多无意义的标签，结构化较差，不建议

三、父级添加overflow属性方法

通过触发BFC的方式，可以实现清除浮动的效果

给父级添加： overflow为 hidden|auto|scroll  都可以实现

优点： 代码简洁

⭐️缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

### **下面两种不太清楚** ###

四、使用after伪元素清除浮动

**:after 方式为空元素的升级版，好处是不用单独加标签了**

使用方法：

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 百度、淘宝网、网易等

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

五、使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { content:""; display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */ } .clearfix:after { clear:both; } .clearfix { *zoom:1; }

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 小米、腾讯等

# 定位 #

元素的定位属性主要包括定位模式和边偏移两个部分

## 边偏移 ##

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">边偏移属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">top</td> 
   <td>顶端偏移量，定义元素相对于其父元素上边线的距离</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">bottom</td> 
   <td>底部偏移量，定义元素相对于其父元素下边线的距离</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">left</td> 
   <td>左侧偏移量，定义元素相对于其父元素左边线的距离</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">right</td> 
   <td>右侧偏移量，定义元素相对于其父元素右边线的距离</td> 
  </tr> 
 </tbody> 
</table>

也就是说以后边偏移和定位模式要搭配用，比如 top: 100px; left: 30px; 等等

## 定位模式 ##

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">static</td> 
   <td>自动定位（默认定位方式）</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">relative</td> 
   <td>相对定位，相对于其原文档流的位置进行定位</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">absolute</td> 
   <td>绝对定位，相对于其上一个已经定位的父元素进行定位</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">fixed</td> 
   <td>固定定位，相对于浏览器窗口进行定位</td> 
  </tr> 
 </tbody> 
</table>

这里展开了解其模式

### 相对定位relative： ###

相对定位是将元素相对于标准流的位置进行定位，当position属性的取值为relative时，可以将元素定位在相对位置

**虽然可以改变其位置，但是它在文档流的位置依旧保留**

注意：

1.  相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2.  其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

### 绝对定位absolute ###

绝对定位通过边偏移实现，它是完全脱标，完全不占有位置/

一、若父级元素一个都没有定位则以浏览器为准对齐

二、绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

### 子绝父相 ###