CSS中的浮动和定位

爱被打了一巴掌 2022-06-11 08:50 237阅读 0赞

浮动和定位一直是让我焦头烂额，一直搞不懂，今天就来消除下盲点……

在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性

> 标准流的默认特性

1、分行、块级元素，并且能够dispay转换。  
2、块级元素（block）：默认独占一行，不能并列显示，能够设置宽、高，宽度为父盒子的100%。例如：div、p、标题元素（h1-h6）、列表元素（ul li、dl dt dd）  
3、行内元素（inline）：默认并排显示，不能设置宽、高，宽度为内容的宽度。例如：span、a、b、i  
4、margin-bottom 和margin-top [塌陷][Link 1]，以最大值为准。

> 脱标的元素的特性

1、只要是脱离了标准流，元素都是不区分行、块的，体现在任何元素都可以设置宽、高；都有了收缩的性质，就是不设置宽度，就自动缩减为里面内容的宽度。  
2、浮动的元素有贴边的性质，绝对定位的元素可以自由定位。

## 浮动 ##

> float  
> 值：left | right | none | inherit  
> 初始值：none  
> 应用于：所有元素  
> 继承性：无  
> 计算值：根据指定确定

--------------------

> 浮动元素：

1.以某种方式从文档的正常流中删除，不过还是会影响布局。  
2.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。  
3.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。  
4.浮动元素周围的外边距不会合并：如果其他元素与一具有外边距的浮动图像相邻（这表示水平相邻和垂直相邻），而且这些元素也有外边距，那么这些外边距不会与图像的外边距合并  
5.浮动元素会生成一个块级框，而无论这个元素是什么

> 浮动的详情内幕

*  浮动元素的规则
    
    简要用自己的话概括一下：  
    1.浮动元素不能超过其包含块的内边界  
    2.浮动元素彼此之间不会覆盖或重叠  
    3.浮动元素的顶端不能比之前所有的浮动元素或者块级元素更高  
    4.浮动元素不能超出其包含元素的边界，除非它太宽，本身都无法放下。这能防止出现以下情况，即多个浮动元素出现在一个水平线上，远远超出其包含块的边界。如果浮动元素出现在另一个浮动元素的旁边，而因此可能导致超出包含块的话，实际上这个浮动元素会向下浮动到之前浮动元素下面的某一点

--------------------

可以参照下图更好的理解浮动规则~  
  
![浮动][SouthEast]

*  浮动元素的实用行为
    
    Q：浮动元素比其父元素高时会有什么结果？  
    A：浮动元素会超过父元素的底端。 *浮动规则只是处理了浮动元素的和其父元素的左、右和上边界，而没有涉及下边界，这个遗漏是故意的。*实际上，有些浏览器不能正确地做到这一点。相反，它们会增加父元素的高度，使浮动元素能够包含在父元素中，即使这会导致父元素中出现大量多余的空白。  
    S（solution）：CSS2.1澄清了浮动元素行为的一个方面：浮动元素会延伸，从而包含其所有后代浮动元素（CSS先前版本并没有明确指明发生的情况）。所以，通过将其父元素设置为浮动元素，就可以把浮动元素包含在其父元素内。  
    Q：浮动元素可以超过父元素吗？  
    A：当然是可以，只需要将浮动元素的外边距设置为负值即可，虽然这看上去与先前的规则相矛盾，不过其实并不矛盾。  
    Q：如果一个浮动元素与正常流中的内容发生重叠会怎么样呢？  
    A：CSS2.1明确以下规则：  
    ——1.行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素”之上“显示  
    ——2.块框与一个浮动元素重叠时，其边框和背景在该浮动元素”之下“显示，则内容在浮动元素”之上“显示  
    *这里所述的重叠行为与源文档中的顺序无关。元素在浮动元素之前还是之后出现并不重要；无论有怎样的顺序，都会有同样的行为*

## 清除 ##

> clear  
> 值：left | right | both | none | inherit  
> 初始值：none  
> 应用于：块级元素  
> 继承性：无  
> 计算值：根据指定确定  
> ——含义：指定了clear的元素将清除左边或者右边或者全部的浮动元素。CSS2.1中引入了一个清除区域，指在元素上外边距之上增加的额外间距，不允许浮动元素进入这个范围。这意味着元素设置clear属性时，它的外边距并不改变。之所以向下移是这个清除区域造成的。

## 定位 ##

> 利用定位，可以准确地定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。  
> position  
> 值：static | relative | absolute | fixed | inherit  
> 初始值：static  
> 应用于：所有元素  
> 继承性：无  
> 计算值：根据指定确定  
>   
>

<table> 
 <thead> 
  <tr> 
   <th>position值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>static</td> 
   <td>元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素会创建一个或多个行框，置于其父元素中</td> 
  </tr> 
  <tr> 
   <td>relative</td> 
   <td>元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留</td> 
  </tr> 
  <tr> 
   <td>absolute</td> 
   <td>元素框从文档流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身</td> 
  </tr> 
 </tbody> 
</table>

> 包含块——定位上下文  
> 对于浮动元素，其包含块为最近的块级祖先元素  
> 对于定位，规则就复杂多了……

*  ”根元素“的包含块即初始包含块，在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形
 *  非根元素，position值为relative或者static，包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成
 *  非根元素，position值为absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何类型，如果没有祖先，元素的包含块定义为初始包含块）。

> 偏移属性：  
> top、right、bottom、left  
> 值：长度 | 百分数 | auto | inherit  
> 初始值：auto  
> 应用于：定位元素（也就是position值不是static的元素）  
> 继承性：无  
> 百分数：对于top和bottom，相对于包含块的高度；对于right和left，相对于包含块的宽度

今天先总结到这儿，未完待续……  
盼着明天汇报结束可以回家看看~  
人嘛，还是需要有点理想的~

[Link 1]: http://blog.csdn.net/melody_day/article/details/53510554
[SouthEast]: /images/20220611/4c44197470844cb19de407e92452aaeb.png