css--5.浮动

1      浮动float

1.1  定义

         使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

         文档流是文档中可显示对象在排列时所占用的位置。

 

1.2  浮动 float

 

1.3  清除浮动

1.3.1  加高

问题：扩展性不好

 

1.3.2  父级浮动

问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）

 

1.3.3  inline-block 清浮动方法：

         问题：margin左右自动失效；

 

1.3.4  空标签清浮动

问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

 

1.3.5  br清浮动

<br clear="all"/>

问题：不符合工作中：结构、样式、行为，三者分离的要求。

 

1.3.6  after伪类清浮动方法（现在主流方法）

.clear:after{content:'';display:block;clear:both;}

.clear{zoom:1;}

 

after伪类： 元素内部末尾添加内容；

                   :after{content"添加的内容";}IE6，7下不兼容

zoom 缩放

                   a、触发 IE下 haslayout，使元素根据自身内容计算宽高。

                   b、FF 不支持；

 

1.3.7  overflow:hidden 清浮动方法；

         问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

 

overflow: scroll | auto | hidden；

         overflow:hidden;溢出隐藏（裁刀！）

 

2      BFC 和haslayout

 

 

BFC (block formatting context)  标准浏览器  块级格式化上下文

         a、float的值不为none。

         b、overflow的值不为visible。

         c、display的值为table-cell,table-caption, inline-block中的任何一个。

         d、position的值不为relative和static。

  e、width|height|min-width|min-height:(!aotu)

haslayout      IE浏览器

         a、writing-mode:tb-rl

          b、-ms-writing-mode:tb-rl

          c、zoom:(!normal)

 

 

3      IE 滤镜

opacity

filter:Alpha(Opacity=opacity