I AM MAO.YOUR FRIEND.WELCOME TO HERE.

每一个不曾起舞的日子都是对生命的辜负

css深入理解浮动

浮动是原先设计为了实现文字环绕效果,具有包裹性和破坏性,包裹性体现在宽度收缩,高度坚挺,与外界隔绝。破坏性体现在父元素高度塌陷,影响其他元素,浮动元素脱离的文档流。浮动也使元素block化,去空格化。
清除浮动带来的影响有二种方式:
1.添加clear:both,但是引入无意义标签。
2.父元素bfc:.clear:after{content:"";display:table;clear:both;} .clearfix{*zoom:1;}

CSS深入理解之float浮动

float设计初衷仅仅是为了实现文字环绕效果
明白float设计初衷可以很好的理解float特有的行为表现

float的包裹与破坏

如何理解包裹
包裹性的理解:收缩(宽度),坚挺(高度),隔绝(对外界没有影响)
BFC-块级格式化上下文
具有包裹性小伙伴
display:inline-block/table-cell
position:absolute(近亲)/fixed/stick
overflow:hidden/scroll

破坏性:
display:none
position:absolute/fixed
浮动带来破坏其他小伙伴

浮动具有破坏性,可以使父元素的高度塌陷
如何理解浮动让父元素高度塌陷的bug,首先浮动使高度塌陷不是bug,而是标准
浮点的原本作业仅仅是实现文字环绕效果。使用破坏css盒模型。

当对图片实行float:left 图片从inline boxes 链上脱离,受自身方位属性的影响,靠左显示,由于其“包裹性”,宽度实体依旧存在,加上与文字处于同一文档流中,文字不会与图片位置重叠,加上图片没有inline boxes,高度丢失,所以文字居顶显示。

清楚浮动带来的影响:
方法一:脚底插入clear:both
方法二:overflow + zoom方法
.fix{overflow:hidden; zoom:1;}
优点在于代码简洁,涵盖所有浏览器,可谓不错的选择啊。不过也是有问题的,就是这个overflow:hidden;是个小炸蛋,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的
方法三:父元素 BFC 或 haslayout
二种方法的差异:
clear就像是索桥,二种通常应用格式:1.html block 水平元素底部走起 <div></div> 2.css after 伪元素底部走起 .clearfix:after{}
BFC/haslayout 就像是封闭空间

二种方法不足:
*脚本插入div:裸露的div很讨厌 div标签看上去很讨厌
*after伪元素:IE6,7不认识  这也是IE6 7经常崩溃的原因
如果想适用于各种场景,BFC各个声明是不可以的,不是所有元素都浮动,或者绝对定位,但zoom:1 却是可以的,但是现在浏览器目前大部分不认可,才有一个权衡的策略。
clearfix:after { content: ''; display: block; height: 0; overflow: hidden; clear: both; }
.clearfix { *zoom: 1; }
更好方法:
.clearfix:after { content: ''; display: table; clear: both; }
.clearfix { *zoom: 1; }
使用display:table 代码更加精简

切勿滥用,clearfix应用在包含浮动子元素的父级元素上。


BFC/haslayout声明:
float:left/right
position:absolute/fixed
overflow:hidden/scroll
display:inline-block/table-cell
width,height:zoom:1(IE6,7) zoom:1 让IE6/7 haslayout 又不会影响形体的神器。

**处理方法:
.fix{content:"";display:table;clear:both;}
.fix{*zoom:1};
该元素使用在父元素上。
记住haslayout往往会使IE6,7做出更加出格的事情,浮动也会触发haslayout,浮动在IE6、7下更显魔性避免浮动的滥用。

inline-block:button img
**float的block化和破坏性
元素block化,即砖头化 display:block
破坏性造成的紧密排列特性,即空格化: 去空格化 将空格在浮点元素之后。

问题在于:
1.容错性比较槽糕,容易出问题 很容易发错错位。
2.布局需要元素固定尺寸,很难重复使用 需要元素固定尺寸,很难重用
3.低版本的IE会有很多问题 在低版本ie下有很多问题

如何借助浮点实现流体布局:
文字环绕:
对图片设置width+float+padding-left/margin-left
对右侧的div设置display:table-cell

让IE7下浮动问题
1.含clear浮动元素包裹不正确的问题 
2.浮动元素倒数2个莫名的垂直间距问题
3.浮动元素最后一个字符重复问题
4.浮动元素楼梯排列问题
5.浮动元素和文本不在同一行问题(左侧标题左浮动,右侧标题右浮动)

总之合理使用float,且用且珍惜


对overflow与zoom”清除浮动”的一些认识
浮动:宽度包裹与内部的元素,浮动的包裹性显而易见。
absolute:即absolute元素(如果没有设置width值),其宽度自适应于内部元素
inline-block:包裹性
overflow的包裹性其实不难理解,直接隐藏超出高度的部分。IE7/IE8下overflow:hidden可以清除浮动造成的影响。

由于zoom为IE私有属性,比例缩放,跟CSS3中transform:scale;作用一样(表现有些许差异)
“包裹”与“清除浮动
1.float:left
2.position:absolute
3.display:inline-block
4.overflow:hidden
5.zoom:1