浮动和display

浮动

1. 作用
   浮动的作用就是使元素并排显示
2. 特点
   第一个盒子会紧贴父盒子边，第二个浮动的盒子会贴第一个浮动的盒子… 依次类推
3. 特性
   脱离标准文档流
   收缩的效果
   字维
   设置浮动，任意的标签 都可以设置宽高
4. 要浮动一起浮动，有浮动，清除浮动
5. 浮动带来的影响：浮动使元素脱离了标准文档流，元素不占文档的位置，撑不起父盒子的高度，影响页面布局
6. 清除浮动的方式
   给父盒子设置固定高度
   内墙法，在浮动元素的后面加一个空的块级标签，并设置类clearfix设置clear:both,清除浮动
   给父元素设置overflow:hidden
   伪元素法，在元素后面添加一个伪元素
   .box:after{
   content:’.’;
   clear:both;
   display:block;
   visibility:hidden;
   height:0;
   }

display

	.box{
		display:inline/inline-block/block/none
		<!--
		inline:设置标签为行内元素
		inline-block:设置标签为行内块元素
		block:设置标签为块级元素
		none:隐藏
		-->
	}

设置居中

在标准文档流下设置盒子居中使用margin:0 auto;
浮动的盒子设置居中的方法：给浮动的元素添加一个父级元素，父级元素的宽度与浮动的元素的宽度一样，然后清除浮动，在给父盒子设置margin:0 auto;

	<!--添加的父元素-->
	.father{
		with: 100px;  <!--与浮动的元素宽度一样-->
		overflow:hidden;
		margin:0 auto;
	}
	<!--浮动的元素-->
	.child{
		width:100px;<!--与父盒子的宽度一样-->
		height:100px;
		float:left;
	}

文本水平居中：text-align:center;
文本垂直居中：行高=盒子的高度（height=line-height）

使盒子脱标的方式

1. 浮动
2. 绝对定位
3. 固定定位