float 的加深，文本显示问题

一、float使用后脱离原本文档流。

我简单编写了三个行块框1，2，3。原本显示如以下图一

设置son1为左浮动并且加长son2的宽度，发现son1脱离文本流不占据空间，并且覆盖住了son2，而son2中文本被挤出div son2.如以下图二

div son1设置浮动后就相当于设置了position:absolute,脱离文档流，但是不同的是，它脱离文档流并且向左或右移动，直到它的边缘碰到包含框的边缘。绝对定位则是相对于祖先元素中不是position 值为static的元素进行设置top、bottom、right、left。
如果三个son都设置左浮动，那么son1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框，如果如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间，如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。如以下图三

二、任何元素设置float属性后都会变为块级元素。

块级元素与行内元素的区别

1. 块级元素会独占一行，其宽度自动填满其父元素宽度行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，
2. 一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效（注意，块级元素设置了width宽度属性后仍然是独占一行的）
3. 块级元素可以设置margin,padding属性，行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

<style type="text/css">
		#son1{
			border: 1px solid #ccc;
			background-color: #f00;
			width: 25vw;
			height: 100px;
			/*float: left;*/
		}
		#son2{
			border: 1px solid #ccc;
			background-color: #0f0;
			width: 30vw;
			height: 100px;
			/*float: left;*/
		}
		#son3{
			border: 1px solid #ccc;
			background-color: #00f;
			width: 25vw;
			height: 100px;
			/*float: left;*/
		}
		p{
			font-size: 30px;
			color: #fff;
		}
	</style>

我在son1中设置了宽和高因为span标签是行内元素所以并没有起到作用。如以下图四

当我把son1设置了左浮动后，宽和高起到了作用，span自动转变为了行内元素。如以下图五

三、A,B相连的块级元素，A设置为浮动后，B内文本显示问题。

css float属性的出现就是解决文字可以包围图片问题，所以当文本遇到浮动元素时不会被覆盖会挤出浮动元素的外边。在上图 图五中“son2”文本被挤到下方是因为父元素设置了宽，父元素右侧宽度撑不下文案。