十一.浮动

1.三种布局方式

1.标准流：块级元素纵向排列，行内元素横向排列
2.浮动流：横向排列
3.定位流：不动

2.什么是浮动？

元素浮动后会脱离文档流，不占据位置，浮在文档流上，元素在水平方向上左右排列。
用来布局，用于图片，文字环绕

3.float属性

左浮动：float:left
右浮动：float:right

4.浮动特性

1.浮动元素会脱离文档流，不占据位置
2.不会影响浮动元素前的元素，会影响浮动元素后的元素，后面的元素安正常标准流排列
3.一浮全浮，一个浮动，全部都得浮动
4.父盒子不设置宽度，子元素浮动后，父元素会高度塌陷，变为0
5.元素浮动，未设置宽度，会压缩元素空间，用于文字宽度未设置
6.多个盒子同时浮动，并处一行时，都在行内显示，并且顶端对齐排列，不会右缝隙，不够自动换行
7.行内元素设置浮动后，可以设置宽高

5.如何解决高度坍塌

父元素没设置宽高，子元素浮动，父元素则会高度塌陷

1.先给父元素添加一个子元素，再给添加的子元素设置 clear:both
2.给父元素设置 宽高,只能适用于已知道子元素宽度
3.给父元素设置浮动，还是会影响后面元素布局
4.给父元素设置 overflow：hidden，子元素超出部分会被砍掉
5.给父元素设置伪元素，最有效方法 
.clear::before,
.clear:：after
{
		display:table;
		content:"";
}
.clear::after {
      clear: both;
}

6.垂直居中

.vertical-center {
	position:relative;
	display:lin-block;
	top: 50%;
	transform:translateY(-50%);
}