HTMLCSS学习笔记（四）----浮动原理及清浮动

---

•  浮动的原理

inline-block

1. 使块元素在一行显示

2.使内嵌支持宽高

3.换行被解析

4.不设置宽度的时候，由内容撑开

5.在IE6，7下不支持块标签

 

浮动：left/right/none

元素加了浮动后，会脱离文档流，按照指定的一个方向移动知道碰到父级的边界，或者另外一个浮动元素停止。

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

4.脱离文档流（*文档流： 在文档中可显示对象在排列时所占用的位置）

5.提升层级半层 （层级：类比楼房）// 浮的不够高，只够元素本身

 

clear样式 ：left/right/both/none 元素的某个方向上不能有浮动元素

 

---

 

• 清浮动

1.给父级也加浮动（不实用）

2.给父级加display：inline-block；（存在问题）？？

3.在浮动元素下加<div class="clear"></div>

clear｛height：0px；font-size：0；clear：both｝(在IE6下有最小高度的问题)

在IE6下高度小于19px的元素，高度会被当作19px处理。

解决办法： font-size：0；

4.在浮动元素下加<br clear="all">(改了结构)

**// 在IE6,7下浮动元素的父级有宽度就不用清浮动，

   haslayout 根据元素内容的大小 或者父级的父级大小来重新的计算元素的宽高

display：inline-block

height：（任何值除了auto）

width：（任何值除了auto）

float：（left 或 right）

zoom：（除了normal外任意值）**

5.给浮动元素的父级加｛zoom：1；｝ 

：after｛content：""; display: block ; clear: both ;｝***用这种！！！***

6.给浮动元素的父级加overflow（在IE6下存在问题）

overflow溢出

auto 溢出默认显示滚动条

scroll 默认就显示滚动条

hidden 溢出隐藏

 

---

 

---

 

 

 

 

• 浮动问题

 

在IE6,7下要并在同一行的元素都要加浮动

 

IE6下双边距BUG

 

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

 

在IE6,7下l几px的间隙问题

 

在IE6,7下li本身没浮动，但是内容浮动了li下就会多出来几px

 

解决办法：

 

1，给li加浮动

 

2，给li加vertical-align：top；（可清理图片下的空隙）

 

在IE6下高度小于19px，高度会被当做19px来处理

解决办法：overflow：hidden