清除浮动的几种方法--伪元素清除浮动（首推）

清除浮动元素

浮动元素的影响：
问题描述：一个父元素div，两个子Div，父不设宽高，会被子元素撑起高度。
当给两子元素设置float（浮动，不占文档流的位置）后，父元素没有高度了————即高度塌陷

形如 ：

<div class="clearfix">
    <div id="d1">1</div>      
    <div id="d2">2</div>
</div>

css样式：.clearfix{
	background: pink;
   }
	#d1{
		width: 200px;
		height: 200px;
		background: green;
		float: left;  
	}
	#d2{
		width: 100px;
		height: 100px;
		background: red;
		float: left;
	}

给d1、d2设置了浮动float：left，若不给父元素设置宽高，此时父元素的高为0，【俗称高度塌陷】，因为float的元素脱离了文档流，即在文档流中不占据位置，它是飘浮起来的），就没有元素撑起父元素的高度此时就会效果如下：

我们发现父元素的宽为0，设置的背景pink也没显示出来【这就是浮动带来的影响】

---

解决办法：

①、伪元素清除

给父级元素添加伪元素

.clearfix::after{	
	display: block;  /* 使其成为块级元素后*/
	content: "";    /*为伪元素加入空内容，以便伪元素中不会有内容显示在页面中*/
	height: 0;       /* 为使伪元素不影响页面布局，将伪元素高度设置为0*/
	clear: both;     /* 清除浮动*/
	}
	.clearfix { *zoom:1; }  /*兼容IE6、IE7 */

清除浮动后，原来给父元素设置的背景也显示出来了，高也被撑起来了

②、或者给父元素添加：

.clearfix{ overflow：hidden/auto }

虽然能实现父元素扩展包含浮动.
但注意：overflow属性不是为了清除浮动而定义的，要小心不要覆盖住内容或者触发了不需要的滚动条。

③、或者 在需要清除浮动的元素后面添加一个空的div（不推荐）

因为它没有浏览器默认样式，没有特殊功能，而且一般不会被css样式化，所以这种方法也是比较常见和常用的方法。但是不太推荐，因为会造成多余的dom。

clear：both

---

-------分割线----------

30.居中浮动

1、给父级元素添加flex属性布局，水平垂直 居中 【超实用，强推】

 display: flex; 	
  justify-content: center; 	   水平居中
 align-items:middle;           垂直方向居中

2、父元素定宽高，只能垂直方向居中浮动元素 。给父元素加属性
display: table-cell;
text-align: center;
vertical-align:middle; /垂直居中浮动元素/

26. meta标签有哪些属性？

提供有关页面的元信息。 元数据总是以：名称/值被传递

meta标签两个属性，http-equiv属性和name属性（均和content一起用）

name属性主要用于描述网页 , 对应的属性值为content[具体描述便于搜索引擎抓取]
<'meta name=“参数” content=“具体的描述”>。
name参数：author description keywords generator revised others

http-equiv属性： 把 content 属性连接到一个 HTTP 头部。
<·meta http-equiv=“参数” content=“具体的描述”>

content-type 【设定网页字符集，charset=utf-8】 expires 【到期时间】
refresh 【自动刷新并指向某页面】 set-cookie【设置cookie】

27. 盒子模型

28. 行内元素、块级元素定义，包含哪些元素

可以给块元素设置宽高，但行内元素不行（下图设同样的宽高，出来的）