CSS核心样式-浮动与伪类简述

浮动定义

浮动是一种非常重要的布局，属性名是float，漂流、浮动的意思，属性值有left左浮动和right右浮动。该属性的作用是让元素脱离标准文档流，同一级浮动的元素可以并排在一排显示。

左浮动

右浮动

浮动的性质

浮动的元素脱离标准文档流。标准文档流是区分行内元素和块级元素的，而浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。
浮动的元素依次贴边。根据浮动方向的设置不同，进行布局时，加载位置的方向也不同，以left为例，父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2← 子元素3←子元素4。

如果父元素宽度足够，浮动后的元素会并排一排。

浮动前与浮动后

父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。

如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。

如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。

如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。

右浮动与左浮动贴边效果是一致的，只是贴边方向不同。按照 HTML 书写顺序依次向右向上一个元素贴边，第一个元素贴父元素的右边。

注意：同一个盒子中，可以有左浮动和右浮动的子盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况。

利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如：①平均分布表格效果。②导航栏效果。③常见的电商或企业网站布局。

浮动的元素没有margin塌陷
margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin 塌陷现象。
浮动的元素让出标准流位置
元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。

• 在 IE6 、 7浏览器中，有兼容问题：

由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用会定位制作。如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。
字围现象
与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。这种效果称为字围现象。

浮动的问题

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

<style>
    .box { width: 1000px; border: 10px solid #f00; }
    .box p { float: left; width: 100px; height: 100px; 
             margin-right: 10px; background-color: skyblue; }
</style>
<div class="box">
  <p>1</p> <p>2</p> <p>3</p> <p>4</p>
</div>
<div class="box">
  <p>1</p> <p>2</p> <p>3</p> <p>4</p>
</div>

清除浮动

清除浮动的影响以解决上述问题。
方法一：给标准流的父元素强制给一个合适的高度height。父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边，但父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

方法二：clear属性清除元素标签自身受到的前面浮动元素的影响。属性值有left、right和both，分别清除对应浮动带来的影响，both清除左右浮动。给标准流的父元素添加clear属性之后，父元素就能不受前面浮动的影响，不会再占有浮动让出的位置。但是父元素不能高度自适应，两个父元素直接如果有margin则没法显示效果。

方法三：隔墙法。

外墙法：在两个大的父盒子之间，添加一个空的<div>标签，标签上带有clear：both属性。可以解决浮动影响后面元素标准流位置和贴边，模拟符元素间的距离，但是父元素高度依旧没有自适应。

<style>
  .cl { clear: both; height: 10px; }
</style>
<div class="box">
  <p>1</p><p>2</p><p>3</p><p>4</p>
</div>
<div class="cl"></div>
<div class="box">
  <p>1</p><p>2</p><p>3</p><p>4</p>
</div>

内墙法：在父元素内部，所以浮动的子元素后面添加一个空的<div>元素，标签高度为0，添加clear属性。解决了父元素高度自适应以及浮动影响后面的元素位置和贴边问题，但是浮动是CSS样式属性带来的问题，内墙法使用HTML结构去辅助解决问题，如果页面中浮动元素很多，则需要添加多个没有语义的空标签，造成HTML结构的冗余。

<style>
  .cl { clear: both; }
</style>
<div class="box">
  <p>1</p><p>2</p><p>3</p><p>4</p>
  <div class="cl"></div>
</div>

方法四：伪类。本质是使用伪类方法利用css代码书写一堵内墙。伪类选择器是通过选中的标签添加伪类，去选中标签的某个状态或位置。:after这个伪类表示选中的是某个标签内部的最后的位置。书写方法是前面加普通的选择器，后面连续书写伪类名称。将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。解决了父元素高度自适应以及浮动影响后面的元素位置和贴边问题。

<style>
.clearfix:after { 
  content: "1";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
</style>
<div class="box clearfix">
  <p>1</p><p>2</p><p>3</p><p>4</p>
</div>

方法五：溢出隐藏。给内部有浮动子元素的父元素添加溢出隐藏overflow:hidden;属性，可以解决浮动的所以问题。

<style>
    .box { 
      width: 1000px; border: 10px solid #f00; 
      overflow:hidden;
    }
</style>
<div class="box">
  <p>1</p> <p>2</p> <p>3</p> <p>4</p>
</div>

元素高度设置后，overflow:hidden;效果是将超过高度的部分直接隐藏，而元素高度没有设置时，如果元素同时设置了overflow:hidden;属性，则元素会自适应内容的高度。

高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

如果父元素高度是固定的，建议使用 height 属性解决。
如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。

伪类选择器

伪类和类之间有一定的相似之处，也存在明显的区别。

普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。

伪类选择器的权重与普通的类选择器相同。写法：前面是普通的选择器，后面紧跟:伪类名。

<a>标签的伪类

<a> 标签可以根据用户行为不同，划分为四种状态，通过<a> 标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。

<style>
  a:link { color: gray; } /* 访问前状态 */
  a:visited { color: cyan; } /* 访问后状态 */
  a:hover { color: red; } /* 鼠标悬浮状态 */
  a:active { color: yellow; } /* 鼠标点击状态 */
</style>

书写顺序：<a> 标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active。
实际应用：
一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。

<style>
  a:link,a:visited { color: #666; }
  a:hover { color: #f00; }
</style>

更加常用的一种设置方式如下： <a> 标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的 <a> 默认显示样式的属性，包括盒模型、文字等。 a:hover 伪类选择器：设置鼠标移上时不一样的样式属性。（其他标签也可以设置:hover伪类状态）

<style>
  a {
    display: block;
    width: 150px;
    height: 150px;
    background-color: skyblue;
    font: bold 20px/50px "Microsoft Yahei";
    text-align: center;
    color: #fff;
    text-decoration: none;
  }
  a:hover { color: yellowgreen; }
</style>

CSS核心样式-浮动与伪类简述