CSS Float合理布局全过程与老调重弹的3栏合理布局

应用CSS合理布局网页页面，那是前端开发的基础功了，甚么两栏合理布局，3栏合理布局，那也是前端开发招聘面试的基础题了。1般来讲，可使用CSSposition特性开展合理布局，或应用CSSfloat特性合理布局。前者合适合理布局主页，由于主页上的內容常常能够彻底操纵。后者合适合理布局模版，模版中填充的內容你无法操纵——例如，在编写wordpress模版时，你毫无疑问无法考虑到每篇博文的长度。这篇博文，便是总结1下如何应用CSS中的float特性开展合理布局，实际上在网上有许多探讨这个话题的文章内容了，但我感觉都没说到点子上。那就来老调重弹1次吧，CSS之Float合理布局。

DIV的特性

合理布局的基础HTML元素div，有这么几个特性，会危害到后边开展的合理布局。留意，下面的特性仅可用于沒有特定width特性和height特性的div，由于在用float开展合理布局的全过程中，大家仅有在特殊的部位（后边会详细描述）才这么做。

•空的div是沒有高宽比的。
•有內容的div其高宽比取决于內容的高宽比。
•假如沒有特定float特性，div的宽度将和占满父元素的宽度（无论是否空的）。
•假如特定了float特性，div的宽度将取决于內部元素的宽度（因此，空的div特定了float特性后既沒有高宽比也沒有宽度）。
在网上的许多实例教程，常常特定了div的宽度或高宽比，随后解读float特性，这对我学习培训合理布局的确造成了很大影响。记牢，仅有在特殊的部位，大家才会特定div的宽度。

Float合理布局的全过程

在实践活动全过程中，我理解到1点，那便是，div是依照在HTML文本文档中的次序开展3D渲染的。也便是说，大家先决策前1个div在网页页面上的部位，随后再决策后1个div的部位。或许这1点是不言而喻的，但它的确是了解Float合理布局的重要，在网上别的实例教程里非常少有提及。

有下面这样的HTML文本文档

1共5个div，以便使这些div具备高宽比和宽度，向在其中加上了1些文本。如今都还没任何float特性，因此每一个div都占满了全部父元素的宽度，而高宽比由在其中的內容决策。3D渲染实际效果以下：

当1个元素具备float特性时，访问器会如何做？我想是这样的：

1.渲访问器检测到这个元素具备float:right特性，
2.依据其內容限定了div的宽度（而并不是尽可能占满父元素宽度）
3.摆脱文本文档流，并挑选这样的部位开展3D渲染：
 1.最先要在文本文档流沒有占据的地区，不然就有将会遮盖早已3D渲染的文本文档。
 2.其次，也沒有别的float元素。
 3.最终，3D渲染以后不容易危害文本文档流。文本文档流该如何走还如何走，可是文本文档中的內容会全自动绕开float元素。
试着将div#sidebar设定float:left特性：

侧面栏沒有波动到题目栏上，即便题目栏右边沒有文本。这是由于题目栏的3D渲染在侧面栏以前开展，访问器3D渲染完题目栏后早已忘了题目栏右边有木有內容了，因此不可以冒着遮盖原先的內容的风险性将侧面栏波动到题目栏上。接着，文本文档流该如何3D渲染還是如何3D渲染，除在其中文本绕开波动元素，就仿佛波动元素不存在1样。

大家期待侧面栏2在网页页面左边，侧面栏1在网页页面右边。由于侧面栏2中內容许多，因此必须限制宽度。以便美观大方，另外限制1的宽度，并对侧面栏2赋float特性。

有点像1个3栏合理布局的模样了。但大家一般不期待中栏高于侧面栏时，拓宽到侧面栏正下方。这时候一般应用的技能便是给中栏带margin特性，上下的值便是两个侧面栏的值。

很好，1个3栏合理布局就进行了。尽管看上去很好，可是假如中栏的高宽比小于侧面栏会如何？把中栏里的內容都删除绝大多数，随后：

见鬼，页脚上去了……这可并不是我期待的。那末也有1个技能，便是在页脚应用clear特性。这个特性的功效便是，使文本文档流中元素在合理布局的情况下，不容许左边或右边出現波动元素。假如有，则在波动元素的正下方开展3D渲染。这里，为页脚加上clear特性。

页脚也一切正常了，这样，1个3栏合理布局就最后进行了。

最终，再看来1个事例吧，这个事例将解释两个难题：

1.当可3D渲染地区除去掉已有的波动元素，剩余的那1块地区，其顶部不够以容下波动元素时，波动元素将舍弃3D渲染在顶部，而3D渲染在前面那个波动元素的正下方。
2.在以上的状况下，两个波动元素依然不在文本文档流中，将会会造成1些诡异的状况。
修复中栏的內容，并改变CSS编码以下：

这张图就清楚地表明了波动元素实际上是不在文本文档流当中的。最先，访问器网页页面沒有500像素宽，因此侧面栏2无法在顶部3D渲染（侧面栏1的存在使室内空间不足了），这时候文本文档流仅仅开展到题目栏。因而中栏从题目栏正下方刚开始3D渲染，以便绕开两个侧面栏，只好先在左上角写几个字，随后到侧面栏2右边委屈地3D渲染，最终才一切正常地伸展开（你能够这样想像，翠绿色和蓝色的后边，实际上是沒有文本的鲜红色）。

作者：1叶斋主人
出处：www.cnblogs.com/yiyezhai