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，不能归入其他类别的字体(一般都是奇形怪状的字体)。 使用这些通用字体类的目的，就是确保在最坏的情况下，文档起码可以通过正确的字形来显示，将通用字体类写到最后即可。