CSS浮动

浮动

兼容性：float > flex > grid
虽然现在很少用浮动进行布局，但很多需要兼容旧版浏览器的项目仍然使用浮动，所以仍然值得学习。

1.float

最早是用来做文字环绕图片，后来演变为水平方向布局方案。浮动会脱离标准流。

• none
• left
• right

浮动规则：

• 层叠上 标准流 < float < position
• 浮动边界不能超过包含块的边界
• 浮动元素脱标但不会发生层叠，如果水平方向空间不够，会向下移动直到空间足够
• 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
• 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

2.去除多个行内级元素的间隙

间隙是由于换行符产生的

<span>2</span>
<span>3</span>

方法

• 删除换行符，但代码不直观
• 父元素font-size设置为0，子元素设置回来
• 浮动
• flex布局 最佳方案，但IE8以下不能用

3.float+负margin布局

使用左浮动布局，需要实现三层结构
contain > box > goods*5
中间的间隙、边框等占据空间，在box中设置负的margin拓宽box盒子宽度，使得刚好居中

4.浮动高度塌陷

浮动是脱离标准流的，子元素使用float时无法向父元素汇报高度，导致高度塌陷。若想要父元素计算高度时涵盖浮动子元素，需要清除浮动。
clear属性:

• left 所有左浮动元素底部
• right 所有右浮动元素底部
• both所有浮动元素底部
• none 默认不清除

清除浮动方法：

• 给父元素设置固定高度 不灵活子元素发生变化不能重新计算
• 父元素最后一个增加空块子元素，设置clear:both; 这样会增加很多无意义的空标签
• 父元素增加伪元素

.clear::after{
	content:"";
	clear:both;
	display:block;
	/* 浏览器兼容性*/
	visibility:hiddle;
	height:0;
}
<div class="clear">
	content...
</div>