CSS浮动、定位与伪类、伪元素

传统网页布局

网页布局本质：用CSS放盒子。
CSS提供三种布局方式：

• 普通流
• 浮动
• 定位

浮动

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

什么是浮动

CSS 的 float（浮动）属性，会使元素向左或向右移动，其周围的元素也会重新排列。

选择器{ 
	float:属性值;
}

float 属性
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

浮动特性

脱标

设置浮动元素最重要的特性是元素脱标。

1. 脱标：元素脱离标准流控制移动到指定位置。
2. 浮动盒子不保留原来位置。
   

顶端对齐排列

如果多个盒子都设置了浮动，则按照属性值一行内显示并顶端对齐排列。

注意：浮动元素相互靠在一起（不会有间隙），如果父盒子装不下浮动盒子，多出的盒子会另起一行对齐。


从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。

这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。

如果我们把div2采用右浮动，会是如下效果：

此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3、div4组成的流。

目前为止我们只浮动了一个div元素，多个呢？

下面我们把div2和div3都加上左浮动，效果如图：

元素特性

浮动元素都具有行内块元素的特性。

例子：
a元素是一个inline，行盒。

当设置浮动后，float: left；在浏览器的开发工具中查看，它的display属性已经从inline(行盒)，变成了block(块盒)。

a {
    float: left;
}

浮动布局注意点

1. 浮动和标准流父盒子搭配。
   先用标准流父盒子排列上下位置，子盒子浮动排左右。
2. 一个元素浮动，理论上兄弟元素都要浮动。
   浮动盒子会影响后面盒子的标准流，但不会影响前面的标准流。（如果浮动盒子排列在前，常规流块盒是无视浮动盒子的，不会避开排列的。它还是在原来的位置）。
   

清除浮动

为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子

清除浮动的本质

• 清除浮动的本质是清除浮动元素对后面元素的影响。
• 如果父盒子本身有高度，则不需要清除浮动，
• 清除浮动后，父级会根据浮动的子盒子自动监测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动语法

选择器{
	clear:属性值;
}

实际工作中， 几乎只用 clear: both;

清除浮动方法

额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法。在浮动元索末尾添加一个空的标签(必须是是块元素，不能是行内元素)。

<style>
    .box {}
    .word1, .word2{
        float: left;
    }
    .footer {}
    .clear{
        clear: both;
    }
</style>
<div class="box">
    <div class="word1">文本</div>
    <div class="word2">文本</div>
    <!-- 空盒子，用来解决高度坍塌 -->
    <div class="clear"></div>
    <div class="footer"></div>
</div>

• 优点：书写方便，易懂。
• 缺点：结构化较差。

父级添加overflow

可以给父级添加overflow属性，将其属性设置为 hidden| auto| scroll 都可以实现。

• 优点：代码简洁。
• 缺点：无法显示溢出部分。

：after伪元素法

：after是额外标签法的升级版，也是给父级添加。

<style>
    . clearfix::after {
        content: "";
        display: block;  /*插入元素必须是块级*/
        /*不要看见这个元素*/
        height: 0; 
        visibility: hidden;
        /*清除浮动*/
        clear: both;
    }
    . clearfix { /* IE6、7专有*/
        *zoom: 1;
    }
</style>
...
<div class="box clearfix">

• 优点： 符合闭合浮动思想 结构语义化正确
• 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout

双伪元素清除浮动

也是给父级添加。

<style>
. clearfix:before, .clearfix:after {
    content:"";
    /*转化为块级元素并且before和after两块一行显示*/
    display:table;
}
. clearfix:after {
    clear:both;
}
. clearfix {
    *zoom: 1;
}
</style>
...
<div class="box clearfix">

• 优点： 代码更简洁
• 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout

解决高度坍塌的万能代码块

.container::after {
content: “”;
display: block;
clear: both；
}

清除浮动小结

定位

定位组成

定位=定位模式+边偏移。

定位模式用于指定一个元索在文档中的定位方式。 通过CSS的position属性来设置。

边偏移
简单说， 我们定位的盒子，是通过边偏移来移动位置的
在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

静态定位（static）

静态定位是元索的默认定位方式,无定位的意思。

static：默认值。即没有定位，元素在正常的流中，top，right，bottom，left 和 z‐index 属性无效。

语法

选择器{ position: static; }

• 静态定位无边偏移，在布局中很少用到

相对定位（relative）

元素在移动位置的时候,是相对于它原来的位置来说的。相对于其直接父元素进行定位top,bottom,left,right，z-index有效。且不会脱标。

语法

选择器{ 
    position: relative;
    top: 100px; 
}

绝对定位（absolute）

元素在移动位置的时候,是相对于它祖先元索来说的。相对于 static 定位以外的第一个父元素进行定位top, bottom, left, right ， z-index 有效。

语法

 选择器{ position: relative;}

绝对定位的特点：

• 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)。
• 如果祖先元素有定位(相对、绝对、固定定位) , 则以最近一级的有定位祖先元素为参考点移动位置。
• 绝对定位不再占用原来位置。

子绝父相
子绝父相：子级要用绝对定位，父级用相对定位。

1. 子级用绝对定位，不占有位置，不影响兄弟盒子。
2. 父盒子需要加定位子盒子才在父盒子内显示。
3. 父盒子布局时，需占有位置，故必须绝对定位。

父元素没有定位，则以浏览器为准定位（Document 文档）

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

固定定位（fixed）

元素固定于浏览器可视区的位置。浏览器页面滚动时元索位置不变。相对于浏览器窗口进行定位top, bottom, left, right ， z-index 有效。

语法

选择器{ position: fixed;}

• 以浏览器的可视窗口为参照点移动元素，与父元素无关。
• 固定定位不占有原来位置。

伪类

伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

语法

selector:pseudo-class {
  property: value;
}

锚伪类

链接能够以不同的方式显示：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

与CSS结合

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

a.highlight:hover {
  color: #ff0000;
}

简单的工具提示悬停

把鼠标悬停到

元素以显示

元素（类似工具提示的效果）：

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

CSS其他伪类: 伪类。

伪元素

伪元素：==用于创建一些不在文档中的元素，并为其添加样式。==实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。

语法

selector::pseudo-element {
  property: value;
}

伪元素总结

CSS所有伪元素: 伪元素。
伪类与伪元素.