css 浮动

css 浮动

在这里我不解释浮动的含义 知道脱离正常普通文档流就行了 更多了解查看w3c手册

现在浮动用于网页布局 css浮动只有多实践才能真正理解 和解决浮动中各种bug

在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。

因为用文字不好说明 所以本人用代码示例w3c手册

	


	
  

   div1
  
	
  

   div2
  
	
  

   div3
  

运行结果如下

在开发中经常遇到的问题：

1.父标签塌陷 w3c手册 如下

使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。

2.注意浏览器大小改变时 body下的子代浮动元素位置可能会发生变化

如果把上面浮动案例 中的浏览器缩小到小于标签宽度那么会出现如下情况