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