CSS浮动布局特性

浮动布局

浮动可以改变元素标签的默认排列方式。例如浮动可以让块级元素一行内排列显示。

float属性用于创建浮动框，使用left或者right属性将浮动框移到一边，left往左移，right往右移，移动的位置是该浮动框的左边缘或右边缘抵达一个盒子边缘或者抵达另一个浮动框的边缘。优先依附在另一个浮动框的边缘。如果移动的这一边没有浮动框，那就移动到盒子边缘，例如父类盒子的边缘。

选择器 {
	float: 属性值;
}

属性值有：
none		//元素不浮动，默认值
left		//元素向左浮动
right		//元素向右浮动

浮动的特性

1. 浮动的盒子会脱离标准流的控制移动到指定位置，相当于向屏幕方向漂浮起来。
2. 浮动的盒子不在保留原先的位置，也就是说浮动盒子原先的位置可以被其它盒子占领。
3. 如果多个盒子都设置了浮动，它们会按照属性值一行内显示并且顶端对其排列。
4. 浮动的元素是相互贴靠在一起，不会有缝隙，若父级元素装不下这些浮动的盒子，多出来的盒子会另起一行对齐显示。
5. 任何元素都可以添加浮动，添加浮动的元素都会具有行内块元素相似的特性。若盒子没有设置宽度，默认宽度与父级元素一样，添加浮动后，其大小根据内容来决定（行内块特点）。
6. 浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流盒子。

**注意：**多个块级元素纵向排列使用标准流，多个块级元素横向排列使用浮动。

通常布局首先使用标准流的布局父元素排列上下位置，然后在父元素内部采用浮动来布局子元素。

清除浮动，父级元素盒子自适应调整高度：
https://blog.csdn.net/Arcofcosmos/article/details/122625541