乐趣区

关于css:CSS浮动与定位详细解析

jiezi

1. 文档流

文档即一个网页，文档流处在网页的最底层，它示意的是页面中的一个地位，咱们所创立的元素默认都处在文档流当中。通过 浮动和定位 能够脱离文档流。
元素在文档流中的特点

  • 块元素：

1. 块元素会在文档流中独占一行，块元素会至上而下排列。
2. 块元素在文档流中的宽度默认值为 auto（主动），即为父元素的 100%。
3. 块元素在文档流中的高度默认为内容高度，即被内容撑开，没有内容就为 0，有内容的话，内容多少它就多少。

  • 内联元素：

1. 内联元素在文档流中只占本身大小，默认从左向右排列。如果一行中无奈包容所有内联元素，则会换行，持续自左向右排列。
2. 在文档流中，内联元素的宽和高都默认被内容撑开。

2. 浮动 -float 属性

float 属性能够使元素浮动，从而脱离文档流。
可选值：

  • none：默认值，元素默认在文档流中排列。
  • right：元素立刻脱离文档流，向页面的右侧浮动。
  • left：元素立刻脱离文档流，向页面的左侧浮动。

特点介绍：

  • 当一个元素设置浮动后（非 none 值）；元素立刻脱离文档流，元素脱离文档流后，它本来的地位将会失去，后边的元素会立刻顶上。
  • 元素浮动后，会尽量向页面的右上（right）或左上（left）浮动，直到遇到父元素的边框或者其余浮动元素，而且在浮动元素的额上边本来有一个块元素，该块元素没有浮动，浮动元素不会超过该块元素，即不会越界上一行。
  • 浮动元素也不会超过它的上一个浮动元素，最多和上一个同一行（地位不够会转行），不会因为上上个浮动元素后还有块地位，因容不下上个浮动元素而空出，却能容下本浮动元素，而跨上一个取上上个边上。

  • 浮动的元素不会笼罩文字，文字会盘绕在元素的四周。所以咱们能够通过设置浮动来做一个文字的成果，就文字所在的块元素不必固定大小，让文字自在撑开。
  • 个别没有设置固定宽度和高度的块元素，其宽度是默认占满一行（父元素的 100%），然而被设置浮动后，它的宽度和高度都会默认被内容撑开。没有内容即为 0.
  • 内联元素脱离文档流后会变成块元素。

3. 高度塌陷问题

在文档流中，父元素的高度是默认（未固定高度即默认）被子元素撑开的。子元素的高度也就是父元素的高度。
然而有一种状况，当子元素设置浮动后，其齐全脱离文档流。这时会导致子元素无奈撑起父元素的高度（子元素脱离文档流后不会保有原来空间），于是父元素高度塌陷。父元素高度塌陷后，其余元素就会向上挪动，导致页面凌乱。

如图：
原来未设置浮动：

设置浮动后：显著父元素边框重合了，父元素高度塌陷

4. 高度塌陷问题解决方案

在开发中要避免出现高度塌陷问题，咱们尽管能够把父元素高度写死以防止高度塌陷问题，然而当父元素高度被写死后，父元素的高度就不能主动适应子元素的高度了。所以不举荐将父元素高度写死。
解决办法：开启 BFC
原理：依据 W3C 规范，页面中的元素都有一个暗藏的属性 Block formatting context(块级格式化背景)，简称 BFC。该属性能够关上或者敞开，默认状况下是敞开的，咱们要关上它（无奈间接关上）。
当开启元素的 BFC 当前，元素将会具备如下的个性：

  • 1. 父元素的垂直外边距不会和子元素重叠
  • 2. 开启 BFC 的元素不会被浮动元素所笼罩
  • 3. 开启 BFC 的元素能够蕴含浮动的子元素

开启 BFC 的办法：

  • 设置元素浮动；
       应用该办法开启 BFC，尽管能够撑开父元素，然而会使父元素宽度失落（因为父元素浮动），而且会导致下边的元素上移，无奈解决问题。
  • 设置元素相对定位；

（前面具体说；）

  • 设置元素 display 为 inline-block；
       能够解决问题，然而会使父元素宽度失落。不举荐应用。
  • 将元素的 overflow 设置为一个非 visible 的值。（举荐应用，应用 hidden 副作用最小）

扩大： 在 ie6 及以下不反对 BFC，要兼容 ie6 就要应用另一个 ie6 这些版本的暗藏属性 —–hasLayout；与 BFC 相似，最好的开启办法就是设置 zoom 值，zoom 示意放大元素（只被 ie 反对），值为一就是不放大，其余设置 width 值也能够开启。zoom:1;

5. 革除浮动

元素浮动会导致下一个元素向上移，即下一个元素收到了浮动元素的影响，而革除浮动就是打消上一个元素浮动后对本人的影响。革除元素应用 clear 属性。
可选值：
none：默认值；不革除浮动；
left：革除向左侧浮动元素对以后元素的影响，革除浮动后，上一个元素尽管向左侧浮动，本人自身元素也不会向上挪动。
right：革除向右浮动元素对以后元素的影响。
both：革除两侧浮动元素对以后元素的影响（实质就是革除对本人影响最大的哪个浮动元素的影响）。

6. 解决高度塌陷最终计划（应用 clear）

1. 增加 div

间接在父元素里的最开端的地位增加一个 div，这个 div 没有设置浮动，就靠这个 div 来撑开父元素，而后对这个 div 设置革除浮动，clear:both;, 就解决了父元素高度塌陷。这个办法根本没有副作用（w3c 举荐）。全浏览器兼容 。
然而这种办法会向页面中增加多余构造，一个空 div。

2. 应用 css 中的 after 伪类

通过 after 伪类向父元素的开端增加一个空白的块元素，而后对其革除浮动，应用它来解决父元素高度塌陷。和间接增加 div 原理一样，但不会增加多余的构造，十分举荐应用。

.clearfix:after{/* 当前这个 clearfix 类能够增加到任何高度塌陷的元素中解决问题 */
content:"";/* 增加一个空元素 */
display:block;/* 使其变为块元素 */
clear:both;/* 革除两侧浮动 */
}
/* 更加优良的版本(即思考了高度塌陷又思考了父子元素垂直外边距重叠问题)*/
.clearfix:before,.clearfix:after{
content:"";/* 增加一个空元素 */
display:table;/* 使其变为块元素 */
clear:both;/* 革除两侧浮动 */
}
.clearfix{zoom:1;}

毛病：ie6 中不反对 after 伪类，须要 hasLayout 来解决，要兼容 ie6 还要写个.clearfix{zoom:1;}；

7. 定位

定位：将指定的元素摆放到页面的任意地位。也就是说通过定位就能任意的摆放元素。

如何设置？
——通过 position 属性来设置元素的定位。
可选值：

  • static：默认值，没有开启定位。
  • relative：开启元素的绝对定位。
  • absolute：开启元素的相对定位。
  • fixed：开启元素的固定定位。(非凡的相对定位)

1. 绝对定位

（输出多个 div 的技巧：div.box$*3——一回车就能生成 class 值 box1 到 box3 的三个 div）
当 position 属性设置为 relative 值后 position:relative; 既是开启了绝对定位。
留神：

  • 但开启了元素的绝对定位后，不设置偏移量元素是不会有变动的。

所以要设置几个无关偏移量的值：
left：元素绝对于其定位地位的左侧偏移量。
right：元素绝对于其定位地位的右侧偏移量。
top：元素绝对于其定位地位的上边的偏移量。
bottom：元素绝对于其定位地位的下边的偏移量。
（通常就只应用两个偏移量就能对元素进行定位，一个程度方向的，一个垂直方向的）

position:relative;
left:200px;
top:200px;
  • 绝对定位是绝对于元素在文档流中原来的地位进行的定位。
  • 绝对定位不会脱离文档流，只是地位变动，原来的地位也还留着。
  • 绝对定位会使元素晋升一个层级，即与其余元素重合后会笼罩对方。
  • 绝对定位不会扭转元素的性质，块还是块，内联还是内联

2. 相对定位

当 position 属性设置了 absolute 值后就开启了相对定位。position:absolute;
相对定位特点：

  • 开启相对定位，会使元素脱离文档流。
  • 开启相对定位后，如果不设置偏移量（其实有默认偏移量，对于真正原点，就是他原来地位的值），元素不会偏移地位，只是下一个元素会因为本元素脱离文档流而往上走。
  • 相对定位是绝对与它最近的先人元素（必须也开启了定位）进行定位的。（个别状况 下咱们开启了子元素的相对定位，都会开启父元素的绝对定位）

如果所有的先人元素都没有开启定位，则会绝对于浏览器的窗口进行定位，例如：左上角的原点（left:0px，top:0px）就是页面窗口的左上角。

  • 相对定位会使元素晋升一个层级。
  • 相对定位会扭转元素的性质（因为脱离文档流的起因），内联元素变成块元素，而后块元素默认被内容撑开。

3. 固定定位

当 position 属性设置 fixed 值后就开启了固定定位。position:fixed;
固定定位也是一种相对定位，它的绝大多数特点都和相对定位一样。
非凡点（不一样的中央）：

  • 固定定位仅仅绝对于页面窗口进行定位，不论父元素开没开启定位。
  • 固定定位会固定在窗口的某个地位，不会随着窗口滚动条滚动隐没。

例子：一些视频，随着你往下翻网页始终保留视频窗口播放，还有就是一些广告始终在你背后，你挪动它也动，始终在原来屏幕哪个地位。
ie6 不反对，固定定位在那就和相对定位一样。

8. 层级

1. 层级常识

  • 如果定位的元素层级一样（都被设置定位，但没有设置层级），则上面的元素盖住下面的元素。
  • 通过 z -index 属性能够设置元素的层级，通过向 z -index 设置一个正整数作为值，该值就会作为以后元素的层级，层级越高越优先显示。（没有设置的默认低于设置了的）
  • 对于没有开启定位的元素不能设置层级，设置了也没用。
  • 父元素的层级再高也不会盖住子元素，即子元素永远在父元素下面。

2. 通明设置

opacity：用来设置元素背景的通明属性。
它须要一个 0~1 之间的数值来设置透明度。
opacity:1;不通明；opacity:0;全透明
即：0：全透明；
1：不通明；
0.5：半透明；
留神 ：opacity 在 ie8 及以下不被反对。
所以 ie8 及以下要用其余属性代替；
filter 滤镜属性，语法如下：
filter:alpha(opacity=50);半透明
须要一个 0~100 的值；
0：全透明，100 不通明，50 半透明。

本文章只总结了最罕用的办法属性，但足够应用与上手，更多属性可查看文档。
感激浏览，心愿有大佬能指出问题！

退出移动版