观张鑫旭老师FLOAT慕课以后关于浮动布局的一些收获

 作为一名刚刚接触HTML+CSS的前端小白，对于布局的理解十分浅显，在第一周的学习过程中，

由刚开始的全局absulote绝对定位，逐渐发展到float“砌砖头”式定位。今天观看张鑫旭大神的CSS-float

慕课后觉收获颇丰。

 主要内容：float与流体布局

首先摆上一个demo,想要达到左侧一张图片，右侧是文本的效果。

在传统的浮动“砌砖头”布局当中，我们会进行以下布局。

：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~

先给头像和文本一个宽度为500px的容器效果 如下：

在容器宽度较大时，显示正常。但如果将容器的宽度改为300px，便会产生错位，如下图：

这就是传统砌砖头式布局的局限性。

而下面就衍生出新的布局。即赋予文本一个margin-left的值，即可避免产生错误。代码如下：

	

		

	 	
：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~
	

这样子，即使容器宽度变小，头像与文本之间也始终会保持着一段间距。如图：

接下来，如果我们想要实现头像在右边，文本在左边我们依照上述的方法，便会自然而然的产生以下想法：

令图片右浮动，给文本增加一个margin-right的值。然而这样实现有一个问题，在我们的看到的效果图中

文本在左边，图片在右边，也就是说文本的是在图片之前的。然而在HTML代码当中则不然，在HTML中图片

的位置是在文本的前面的。以下就是让文本与图片的位置在HTML代码与肉眼所见一致的方法。

也就是DOM与显示位置匹配的单侧布局。

	

	 	

	 		
：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~
	 	
	 	

	 
	 	
	

 最后，如果头像的大小也想变化怎么办？

这时就是最后一种方法：浮动与两侧皆适应的流体布局。

	
	
	


	

		

	 	

	 		
：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~
	 	
	 
	 	
	

即也给文本外套一个标签，并且给他的样式添加display属性，其中table-cell适用于IE8+,而inline-block适用于低版本，再

将他的宽度设为一个较大的数值如代码中的2000，甚至是9999，即可达到两侧自适应的效果。