css浮动的学习

浮动最初的设计是用来制作环绕文字的。

在现代浏览器下（ie6，7排除啊），浮动内容不会撑起父容器

1：块状元素浮动在IE6,7下面会有双倍margin的bug，display:inline.

2：ie6,7下面同一行元素错位解决办法，全部加浮动

3：ie6,7下li内容浮动产生几px的间隙，解决办法：1：vertical-align:top/middle.2：内容全部浮动

元素浮动后，默认是顶部对齐的。

4：图片间隙问题：1：加display：block,但是这样会对布局有影响，2：vertical-align

5：ie6下，最小高度问题，解决办法:overflow:hidden

6：ie6下面图片空隙产生，解决办法：解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom

还可以设置父容器的字体大小为零，font-size:0

7：ie6下面空标签最小高度为19px,一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。

例如：
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}
<div class="c"></div>

如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释, 
<div class="c"><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,
<div class="c">&nbsp;</div>(#换成&)

8：IE6，7下li的间隙 在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙

解决办法: 1.给li加浮动2.给li加vertical-align:top;

9：清楚浮动：解决办法：1:(.clear{zoom:1},clear:after:{content:"",display:block;clear:both})

                              2:BFC清除浮动BFC的定义

10:计算一定要精确 不要让内容的宽高超出我们设置的宽高

 

在IE6下，内容会撑开设置好的宽高

11:在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动

在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动

注意标签嵌套规范,否则和容易出问题

IE6下最小高度问题

在IE6下元素的高度的小于19px的时候，会被当做19px来处理

 

解决办法:overflow:hidden;

1px dotted 在IE6下不支持

解决办法:切背景平铺

在IE6下解决margin传递要触发haslayout

 

在IE6下父级有边框的时候，子元素的margin值消失

 

 

解决办法:触发父级的haslayout

IE6下双边距BUG

 

在IE6，块元素有浮动和和横向的margin值 ，横向的margin值会被放大成两倍

 

 

解决办法: display:inline;

margin-right 一行右侧第一个元素有双边距

 

 

margin-left 一行左侧第一个元素有双边距

在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙

解决办法:

1.给li加浮动

 

2.给li加vertical-align

在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙

解决办法:

1.给li加浮动

2.给li加vertical-align

 

 

当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动

当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

在IE6下的文字溢出BUG

    

    子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素

    

 

    解决办法:用div把注释或者内嵌元素用div包起来

 

当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失

解决办法:

 

给定位元素外面包个div

在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素

 

 

解决办法: 给父级也加相对定位

在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差

 

在IE6，7下输入类型的表单控件上下各有1px的间隙

 

解决办法:给input加浮动

 

在IE6，7下输入类型的表单控件加border:none;

 

解决办法: 重置input的背景

 

在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动

 

解决办法: 把背景加给父级

 

位置

PageY=clientY+scrollTop-clientTop

是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。

在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。

BFC到底是什么？

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。

怎样才能形成BFC

• float的值不为none。
• overflow的值不为visible。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

BFC的作用

1.不和浮动元素重叠

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。比如下图的效果，参考例子

<div style="float:left; border: 2px solid red"> 123</div>
<p style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1">
The quick brown fox jumped over the  4seohunt.com lazy  dog's back.
The quick brown fox jumped over the lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
</p>

2.清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了(IE Haslayout)。

3.嵌套元素Margin边距折叠问题的解决

按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

摘自：http://www.w3cmm.com/other/css-bfcblock-formatting-context.html

 

如何清除浮动：http://chenfengming.cn/other/css-clearing-float.html

 http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html