前面在《CSS3 Media Queries》介绍了一些CSS3的Media Query的理论知识，今天开始主要针对CSS3 Media Query进行一些实际案例的分析，从实际案例中来进一步学习和运用CSS3的Media Query，从而好让大家在自己的项目中更好的应用Media Query。

众所周知，平时在写HTML代码时，难免少不了使用Float样式，这样一来，假使您没有清除浮动，那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说，假如你在写CODE时，其中div.A（这个就是说页面中有一个div，并且把其命名为class="A"）中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例)，并且此时div.B和div.C进行浮动，而div.D不进行任何浮动，此时你可以看到父元素div.A高度仅靠div.D来撑开其高度，如果您将div.A所有子元素进行浮动，当你没有清除内部浮动时，此时会导致浮动的父元素div.A无法自动撑开本身的高度。也就是说：当一个元素是浮动的，如果没有关闭浮动时，其父元素不会包含这个浮动元素，因为此时浮动元素从文档流中脱离。下面我们先来看看这两种现像的实例：

Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：

  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者这样的形式：

前面集中精力介绍了CSS3 Multi-columns中的column-width、column-count以及column-gap、column-rule。

上一节主要介绍了"Multi-column"中多列布局模块（CSS Multi-column Layout Module）的《CSS3 Multi-columns 之列数和列宽》,今天主要来和大家一起继续学习其中的第二部分：column-gap和column-rule。

“Multi-column”译成中文就是“多列”，这个"Multi-column"是W3C给CSS3增加的一个多列布局模块（CSS Multi-column Layout Module）。它主要应用在文本的多列布局方面，对于文本的多列布局我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示：

前天在一个前端群中碰到一个网友问了一个有关于唐人的CSS帝国中关于选择文本，背景是红色，而文本是白色的问题，如下图所示：

或许大家对这样的实现并不陌生，可是有很多童鞋可能跟我一样，并不知道是如何实现，因为在默认情况下，选择网站文本都是深蓝的背景，白色的字体,就如下本站的而言，选择文本后，背景是深蓝色，而选中的文本就是白色，如下图所示：

前面几节和大家一起学习了CSS3中给Background新追加的属性：《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》。

Background-origin是CSS3为Background扩展的第三个属性，从Background-origin字面上不难发现是指背景图片的原点，其实background-origin主要就是用来决定背景图片的定位原点，换句话说就是背景图片定位的起点（

上一节在《CSS3 background-size》详细的介绍了CSS3为background新增属性之一，今天和大家一起来学习CSS3中有关于Background的第二新属性Ba