关于float

高度塌陷：元素只有样子没有高度

 

Float

只是为了实现文字环绕而设计的。

包裹性：像是div元素，默认是撑满整个屏幕，包裹住它的内容

破坏性：破坏inline box模型，使父元素高度塌陷

 

Float原理

撇开浮动的“破坏性”，浮动就是个带有方位的display:inline-block属性。

设计者在css的内部实现上使float具有破坏性，要破坏原有的文档流，把这个浮动的元素抽离，让其他的元素在定位的时候会当做没看见它，不过浮动的元素依旧存在于DOM树中。

看一个例子，链接在下面。

因为蓝色的div脱离了文档流，跟在后面的h2和p的盒子都当做没看到这个div的样子去定位，所以他们都顶着浏览器左边和顶部的边框。但是有趣的是，h2和p里面的文本（属于content flow）却都看到了这个被float的div，在自己的盒子里往右推，飘到了蓝色div的边上。这就是float的特性，其他盒子看不见被float的元素，但是其他盒子里的文本看得见。

删掉float: left，加上postion: absolute。和float一样的是，旁边的盒子无视了蓝色div的存在，也是顶着左边边框定位。但是~文本也无视了蓝色div的存在，顶着左边边框定位！

 

绝对定位的特点就是脱离文档流。

而float是相对于原有位置进行偏移，但是文档流中还保留原有位置（mocco），这个应该就是上面所说的其他盒子中的文本会看见float的div。

W3C

Float a box is first laid out according to the normal flow, then

taken out of the flow and shifted

to the left or right as far as possible. Content may

flow along the side of a float.

 

Float带来的特征

· 元素块状化（block）

· 破坏性造成紧密型排列，使空格（或者换行符）后置

第一个特征就是float之后的元素的display属性值会变成block，但是不会像block一样独占一行。

在html文件的代码中，每个按钮之间实际上有一个换行符的存在

 

关于BFC自适应布局

如果要设置一个float元素和一个bfc元素之间的间距，采用margin但是最好设置在float元素上，因为bfc元素本身的间距值就比较大，要在可视角度上产生效果，需要设置相当大的值才可以。

 

清除浮动

   空div法:加入空div，给其设置clear:both

   Overflow：给浮动父元素设置，可以闭合浮动。

   :after伪元素：给浮动父元素设置，代表一个元素之后最近的元素。

<style>

    .clearfix {/* 触发 hasLayout */ zoom: 1; }

    .clearfix:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

</style>

<div class="box clearfix">

    <div class="main left">我设置了左浮动 float: left</div>

    <div class="aside left">我是页脚，但是我也设置了左浮动。</div>

</div>

其实空div法和:after伪元素都是利用的clear属性。而overflow是通过触发浮动元素父元素的BFC来清除浮动的。但是设置了clear属性后并不能消除margin重叠问题。

 

关于BFC

1.可以阻止外边距折叠

2.可以包含浮动的元素

3.可以阻止元素被浮动元素覆盖

 

清除浮动的缺点：

1.不能“一方通行”【没有哪一个方法适合所有情况】

2.你我相逢不相识【IE7及以下都不识别:after伪元素】

 

所以经过权衡后得到的综合策略是

 

.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}  //IE8+.clearfix{*zoom:1;}  //IE7-

或者是

.clearfix:after{content:'';display:table;clear:both;}  //IE8+.clearfix{*zoom:1;}  //IE7-

 

自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值。

左侧固定，右侧自适应两栏布局

1.左右都用position:absolute绝对定位

   .left{position:absolute;left:0;width:200px;}

   .right{position:absolute;left:200px;right:0;height:100%;}

2.左边float:left右边设置margin-left

.left{float:left;width:200px}

.right{margin-left:200px;height:100%;}

3.左边float:left，右边overflow:hidden(产生BFC)

.left{float:left;width:200px}

.right{overflow:hidden;height:100%;}

4.左边绝对定位，右边margin-left

.left{position:absolute;left:0;width:200px;}

.right{margin-left:200px;height:100%;}

5.左边定宽，右边不设置宽度，则右边的div的宽度是包括左边的div宽的。所以严格来说不能叫做右边自适应。

.left{float:left;width:200px;}

.right{height:100%;}

 

讲到一边固定另一边自适应的布局，有一种情况，是左边自适应，右边固定，这时要注意一个DOM与显示位置是否匹配的问题，也就是说在html代码中是先写左边元素，还是先写固定的右边元素。建议，按照显示位置顺序写，也就是先写左边元素。

实现方法：

width:100%+float

Padding-left/margin-left

width+float+margin负值

代码为

 

.full{float:left;width:100%;}    .left{margin-right:76px;}.right{width:56px;float:left;margin-left:-56px};

 

两侧自适应布局

 

.left{float: left; margin-right: 20px; }.right{display: table-cell; *display: inline-block; width: 2000px; *width: auto; }