html块级浮动布局法则,关于float浮动的块级元素在编写html时先后顺序对布局的影响...

闲来没事，在做2016年百度前端技术学院，任务三：三栏式布局

看了下任务需求：

感觉 so easy，于是立马动手写了！

html部分

css部分

结果一看：

刚看到这个结果时感觉脸都绿了，然后调出css仔细看哪里写错了：

找了半天也没看出css哪里写的不对，之后我又看了下学院里面其他同学写的demo。

经过对比也没发现不对。

接下来我在Chrome上用开发者工具(F12)进行页面调试。

发现：

终于让我找到罪魁祸首了！！

就是class="index-box-middle"的DIV 中 margin-right 导致的 右边部分的DIV无法在页面右上方浮动

至于怎么解决这个问题呢，我们可以从html的书写顺序上下手

把中间部分和右边部分的DIV 书写顺序调换一下就可以了，然后看结果：

至此，总算完成任务了！呼~

造成这样的原因：

页面中一共3个div 从左到右 暂且称为div1、div2、div3。

出问题前html中书写顺序是div1、div2、div3

解决问题后html中书写顺序是div1、div3、div2

div1 设置了float：left，因此div1可以说已经半脱离了文档流。

说到这里就不免要说一下 float浮动 和 position：absolute绝对定位的区别了。

设置了float浮动元素会脱离文档流 即从页面普通的布局排版中脱离，其他盒子元素会当这个float浮动元素不存在而进行定位。但是文本元素却会重视它，因此形成了文本环绕效果。

所以我们可以理解为当元素设置了float浮动，则该元素脱离了文档流却没有脱离文本流。因此我们也可以称之为半脱离文档流。

设置了position：absolute的元素则完全脱离了文档流。其他任何盒子元素、文本元素和盒子内的文本元素都将无视它进行定位。

div2 并没有设置float，因此它是文档流里的第一个元素占页面第一行，而后面的div3设置了float，因此它也半脱离了文档流。

这个时候，由于在html文档中div2写在div3之前 ，因此浏览器根据文档流先行渲染出来了div2的内容，而到了div3时浏览器不能破坏页面前面已经渲染出的部分，因此只能从div2下方开始渲染。

于是就出现了第一次看到的div3在div2下方向右浮动的现象。

So，解决方法就很简单了，只要书写html时div3写在div2之前，浏览器就会根据文档流先渲染div1、div3内容。之后由于div1和div3都半脱离了文档流，因此渲染div2内容时会无视div1、div3进行渲染，但文字会环绕于div1、div3之间。也因此有了三栏式布局。