文档流 css中的float clear与布局

浏览数：38 / 时间：2015年06月09日

文档流

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

 <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的浏览器打开审查元素会看到