布局 外边距合并问题 清除浮动特性

布局：

默认文档流：
	元素默认所在浏览器中的位置
	从上到下，从左到右

1.display：

	inline:将块级元素转换为行内元素
	block：将行内元素转换为块级元素
	inline-block：将当前元素转换为兼具行内和块级特性的元素

2.浮动布局

	float:left/right;

	浮动属性不会遮盖文字
	对行内元素设置浮动，会让行内元素可以设置宽高属性
	对于块级元素设置浮动，独占一行属性失效

	浮动合适停止？
	1.当遇到父级边框时停止浮动
	2.遇到其他浮动元素停止浮动

3.定位

		position
		static：静态布局//[ˈstætɪk]                                                                                               
		absolute:绝对定位://  [ˈæbsəluːt]                                                                                                
                                                                                                
			特点：
			1.默认脱离文档流
			2.不保留定位前空间
			3.默认情况下，绝对定位元素根据body左上角进行定位
			4.当父元素具有定位属性时，子元素根据父元素左上角进行定位

		relative:相对定位//[ˈrelətɪv]
		特点：
			1.根据元素本身所在的位置进行定位
			2.不脱离默认文档流
			3.保留定位前空间
		fixed:固定定位 //[fɪkst]
                                                                               
			特点和绝对定位相似
			使用了固定定位的元素，不会随着滚动条的滚动而滚动
		sticky:粘滞定位//[ˈstɪki]
			relative+fixed


			配合属性：
				left
				top
				right
				bottom

4.display：flex

	当前元素即刻变成一个伸缩盒，并且所有子元素自动成为父元素的一个成员项item
	子元素的浮动属性自动失效
	flex-direction:设置子元素的排列方式
	flex-wrap: wrap;
	-->
	简写形式：
		flex-flow:direction wrap

	align-items: 
		设置元素在y轴方向上的位置

		stretch:子元素默认高度为父元素100%

		flex-start
		flex-end
		center
	justify-content:
		设置元素在x轴方向上的位置
		flex-start
		flex-end
		center
		space-around
		space-between

子元素：
	flex:number:当前item占据父元素剩余空间的份数

外边距合并问题：

	父子级：
		1.给父元素添加边框属性
		2.将本应该设置给子元素的margin设置给父元素的padding
		3.给父级或者子级添加float属性
		4.给父级或者子级添加position: absolute;
		5.给父元素或者子元素添加display: inline-block;
		6.给父级元素添加overflow: hidden;
		
	兄弟级：
		解决方法：将设置给两个兄弟元素的margin，设置给一个元素即可
		
		合并规则：
			1.如果两个数值均为正数，取较大一个进行设置
			2.如果两个数值均为负数，取较小一个进行设置
			3.如果两个数值一正一负，直接进行想加

清除浮动特性：

	clear:left/right/both
	1.在浮动元素之后添加一个块级元素,给块级元素设置清除浮动

	2.给所有浮动元素的父元素设置::after{
		content:'';
		clear:left;
		display:block;
	}