• 其实 CSS 一开始设计 float 属性的主要目的是为了实现文本绕排图片的效果。 然而这个属性居然成了创建多栏布局的最简单方式。 先来看看 float 实现文本绕排的效果。
  img {
  float: left;

        width: 180px;
        height: 120px;
        margin: 0 12px;
    }
  
    p {
        width: 480px;
        margin: 12px;
        padding: 12px;
  
        border: 1px solid #ccc;
    }
  

demo01.png

上面我们提到了，设置了 float 之后，图片就会脱离文档流，所以它的父元素也就看不到它了，这样就会出现一个问题，比如当父元素包裹不住图片的时候，父元素的紧邻兄弟节点会自动让出左边的空间，比如下面这样。
<section>
<img alt="picture" src="15.jpg" />
<p>
Section
</p>
</section>

    <footer>
        This is footer</footer>
    </footer>

demo02.png

有没有什么办法能解决上述这种尴尬的情景呢？ 问题的答案是有的，而且有三种，下面来一一介绍。

1. 为父元素添加 overflow:hidden
   section{
   overflow: hidden;
   }
   

   demo03.png

2. 同时浮动父元素。 浮动父元素之后，它就会将它的子元素全部包含在自己内部（无论是浮动元素还是不浮动的元素）， 所以我们还需要将父元素的宽度设置为与浏览器同宽，不然父元素会不断换行以包装不同的子元素。 还有，要在footer 中清除左浮动，不然 footer 会极力挤到 section 的旁边去。
   img {
   float: left;

       width: 180px;
       height: 120px;
    }
   
    section {
       float: left;
   
       width: 100%;
    }
   
    footer {
       clear: left;
    }
   

3. 添加非浮动的清除元素。

    section:after{
       content: "";
       display: block;
       height:0;
       visibility: hidden;
       clear: both;
    }
   

• 如果把 display 的值设置为 none， 该元素以及包含在其中的元素都不会在页面中显示，它们占用的空间也会被回收，就好像这些标记根本不存在一样。 于此相对应的属性是 visibility, 常用的两个值是 visible 和 hidden。 把 visibility 的值设置为 hidden 后，元素会不可见，但是它仍会占有其原本的空间，不会被回收。

• 下面我们来讲讲背景图片和背景渐变的一些知识。 假如有一个 div ， 为其设置很大的背景图片。

  div {
    width: 480px;
    height: 320px;
  
    background-image: url('15.jpg');
  }
  

demo04.png

    background-position: center;

demo05.png

1. 50% ： 缩放图片，使其填充背景区的一半。
2. 100px 50px ： 把图片调整到 100 像素宽， 50 像素高。
3. cover : 拉大图片，使其完全填满背景区，保持宽高比。
4. contain ： 缩放图片， 使其恰好适合背景区，保持宽高比。

下面是将 background-size 设置成 cover 的效果。

demo06.png

    background: linear-gradient(red,green);
  }

demo07.png

可见，线性渐变默认是从上到下的，当然我们可以根据我们的需要改变这种默认方式，比如我们让其从左到右渐变。
background: linear-gradient(to right,red,green);

demo08.png

甚至可以从左上角到右下角进行渐变。
background: linear-gradient(135deg, red, green);

demo09.png

demo10.png

background: linear-gradient(red 20%, white 50%, green 80%);

demo11.png

demo12.png

由于渐变是 CSS3 新属性，所以别忘了对浏览器进行适配，比如说下面这样。

   background: -webkit-linear-gradient(red, white 20%, green 50%, blue 80%, red);
   background: -o-linear-gradient(red, white 20%, green 50%, blue 80%, red);
   background: linear-gradient(red, white 20%, green 50%, blue 80%, red);

讲完了线性渐变，下面来看看放射性渐变。

  background: radial-gradient(white, red, green);

demo13.png

可见，图形为按照 白红绿 填充满。当然，我们还可以指定渐变形状，比如设置为圆形。

  background: radial-gradient(circle, white, red, green);

demo14.png

还可以设置放射中心的位置，比如下面这样。

  background: -webkit-radial-gradient(100px 100px, circle, white, red, green);

demo15.png

• 关于设置文本的 line-height 属性，我们可以利用其实现文本垂直居中的效果。

  div {
    height: 32px;
  
    background: rgba(123,23,89,.5);
  }
  
  p {
    line-height: 32px;
  
    color: white;
  }
  

其中， div 是 p 的父节点，我们通过设置 line-height 和父元素的高度相等，就可以让文本居中，这是为什么呢？ 假设文本的大小为 16px，而这个时候的行高为 32px, 那么浏览器就会在文本的上下添加 (32-16)/2 px 的空白。

很多情况下，我们会使用第三方字体， Google Web Foots 是个不错的网站，我们只需要选中我们要使用的字体，它就会提供一个 link， 供我们使用字体，比如像下面这样。

demo16.png

在涉及文字排版的时候，最好借助网格线，比如下面这个图片

grid_18px.png

利用这个图片我们将文字与基线对齐，然后再将图片去除，这样我们的排版就会看起来很美观，比如下面这样。

demo17.png

本来还想介绍更多的内容，限于篇幅，只能在下一篇文章中再介绍了。