文档流 css中的float clear与布局

文档流

            先说说什么是文档流  流是什么 就是一串连续的东西

 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div>
  <div style="background-color:red;width:40px;height:80px;">第二个框 </div>
  <div style="background-color:yellow;width:40px;height:80px;">第三个框 </div>
  <span>我换行</span>
  <span>我不换行</span>

我们写在html里面的元素 系统会放在数据流里依次读取 按照从左到右从上到下的顺序 放置在页面上

当然在放置的过程中 牵扯到行内元素与块级元素的概念

简单说明一下

块级元素: 如div 每一个div元素占据一行 如果没有设置宽度 就默认放满整行 如果指定了宽度 即使宽度再小 后面的元素也得另起一行放置

行内元素:如span不会换行 举个例子如A是行内元素 后面的元素就放在A的右边而不是下边

浮动

说完了文档流 再说说浮动

在上面的例子里 三个div都是块级元素 一个占一行 可问题是 我就想让他们的布局如下 怎么办

先看代码

  <div style="background-color:pink;width:40px;height:80px;float:left;"></div>
  <div style="background-color:red;width:80px;height:80px;"></div>
  <div style="background-color:yellow;width:40px;height:80px;">	</div>
  <span>我换行</span>
  <span>我不换行</span>

大家看第一行的代码里 多了一个float:left

它的意思就是说让这个元素脱离文档流的限制 把他"浮动"到包裹他的容器的最左边 (此时在文档流里就没有它的存在了)

现在在看 那三个div的宽度参数 深红色的宽度是80 我们只看到了右边的40 左边的40个像素被在文档流之外的粉红色div挡住了

这个图的代码如下

	<div style="float:left;background-color:pink">
			<span>dd</span>
			<select name="general.language">
					<option value="volo">Volvo</option>
					<option value="saab">Saab</option>
					<option value="fiat">Fiat</option>
					<option value="audi">Audi</option>
			</select>
	</div>
	<div style="background-color:blue">LLL </div>
	<div style="background-color:green">  asdf</div>
	<div style="background-color:yellow;" >	ddddd</div>
	<div>	eeee	</div>

如果大家用的是chrome的浏览器打开审查元素会看到

其实蓝色的111div是从顶行放置的  粉红色的div放在它上面 挡住了一部分

(lll asdf 居中打印了 同一段代码在editplus与chrome显示不一样 应该是解释的机制不同吧)

这也符合上面我们说的文档流的理论: 哪个元素有了float属性 就把他取出文档流 而文档流内部的元素就放置在自己应该在的位置上

可问题是我想让asdf也顶行写不行吗?

这就牵扯到float的详细布局方式了 告诉大家一句话

  假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

       div的顺序是HTML代码中div的顺序决定的。

       靠近页面边缘的一端是前，远离页面边缘的一端是后。

那有另一个问题了,如果a本身不是浮动的呢? 钻牛角尖了吧,如果a不是浮动的,那它就还在文档流里面呗!就是下面这个图的大红色块说明的道理

如果还是不明白,自己敲几行代码,看看效果就ok

 

分析咱们的页面LLL的前面元素有浮动标签 就把LLL放在前边元素的右边

asdf的上一个元素是LLL 所以asdf就放在LLL的正下方 也就是我们图中的效果

 那怎么办?

clear

       clear : none | left | right | both
       取值：
       none  :  默认值。允许两边都可以有浮动对象
       left   :  不允许左边有浮动对象
       right  :  不允许右边有浮动对象
       both  :  不允许有浮动对象

clear本身就是清除元素本身的浮动效果的

我们在asdf上加上clear:left就ok了

资料推荐

(下面这个文章 写的远比我的好 我的资料也基本来自这里 大家一定看看)

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html#undefined