CSS基础（一）清除浮动的几种方法

块级元素和行内元素

• 块级元素
  盒子会扩展到与父元素同宽 明确设定 width 属性后，块级元素就不会再扩展到与父元素(即 body)同宽了。
  可以设定宽高。
  前后会换行
  常见：DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL
• 行内元素
  盒子会“收缩包裹”其内容，并且会尽可能包紧。不能设定宽高
  前后不会换行
  常见：SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR

浮动后怎么让子元素仍在父元素内

浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。父元素会收缩到没它一样。

使父元素围住浮动元素的三种方法

- 方法一:为父元素添加 overflow:hidden
这个属性作用：
1.消除了有float属性的子元素的float属性（即不会在天上飘着了）
2.父元素如果没设置高度，则子元素的高度会自动填充父元素的高度
。但一旦设定了高度，子元素再怎么大也不会比父元素大，多的部分会被隐藏，这就是hidden的作用~
- 方法二:同时浮动父元素
如果没有父子关系的话，下一个浮动的元素会跟在上一个浮动元素的后面~~~
如果有父子关系的话，父不设置宽高的话，父还是会自动以子内容扩充，当然如果设置了的话。。。子该多出来的还是会多出来的
方法三:添加非浮动的清除元素

 .clearfix:after {       
    content: ".";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/
    display: block;   /*加入的这个元素转换为块级元素。*/
    clear: both;     /*清除左右两边浮动。*/
    visibility: hidden;      /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
    line-height: 0;    /*行高为0；*/
    height: 0;     /*高度为0；*/
    font-size:0;    /*字体大小为0；*/
}

这就相当于在最后加了一个不显示的块，他作用是使两边取消浮动
注意是在父元素添加，这样最后加进去的块才会临着子元素那个块

这三种方法的使用要因地制宜。比如，不能在下拉菜单的顶级元素上应用 overflow:hidden，否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显 示在其父元素区域的外部，而这恰恰是 overflow:hidden 所要阻止的。再比如，不能 对已经靠自动外边距居中的父元素使用“浮动父元素”技术，否则它就不会再居中，而是根据浮动值浮动到左边或右边了。

(总之 clearfix 大法好。
字体和文本

字体

body {font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}

在指定文本的字体时，需要多列出几种后备字体， 以防第一种字体无效。这个字体的列表也叫字体栈。

• 字体类

serif，也就是衬线字体
sans-serif，也就是无衬线字体
monospace，也就是等宽字体
cursive，也就是草书体或手写体
fantasy，不能归入其他类别的字体(一般都是奇形怪状的字体)。
使用这些通用字体类的目的，就是确保在最坏的情况下，文档起码可以通过正确的字形来显示，将通用字体类写到最后即可。