float:left;
浮动的作用:left/right/none
(1)使块元素在一行显示
(2)使内嵌元素支持宽高
(3)不设置宽度的时候宽度由内容撑开
(4)脱离文档流 (文档流是文档中可显示对象在排列时所占用的位置)
(5)提升元素层级半层。(一个元素的层级分元素本身和元素内容,元素内容在上面,元素本身在下面,就好比楼层一样,可以这样理解,元素内容就是写在元素里面的东西,例如文本图片等、元素本身就是元素的背景,边框之类组成的,浮动的作用就是将将元素的内容提升半层,提升到元素内容,所以例子里面的文本会被挤出来)
元素加了浮动以后,会脱离文档流,按照指定的方向去移动,直到碰到父级的边界或者另外一个浮动元素就会停止。
clear:left/right/none/both;
clear的作用就是元素的某个方向上不能有浮动元素
当父级没有设置高度,而子元素设置了高度且有浮动,这个时候子元素会脱离文档流,父级会包不住子元素。
解决方法:
(1)给浮动元素的父级也加浮动,这样子元素就会撑开父级高度,但是这样有个问题,加入父级也有父级,也要给父级的父级加浮动,这样比较麻烦
(2)给浮动元素的父级加display:inline-block;但是存在一个问题,如果父级元素有margin:0 auto;时,父级不会居中
(3)在浮动元素下加<div class="claer"></div> .claer{height:0;clear:both;font-size:0;}
(4)在浮动元素下加<br clear="all"/>(不符合w3c的规则,w3c要求结构、样式、行为三者分离)
(5)给浮动元素的父级增加 :after{content:"";dispaly:block;clear:both;} {zoom:1},需要注意,IE6、7下不支持after伪类;在IE6、7下浮动元素的父级有宽度的话就不用清浮动(各大主流网站推荐的清浮动方法)
(6)给给浮动元素的父级增加overflow:hidden;或者overflow:auto;(),一定要配合room:1;
IE6下最小高度问题:IE6下高度小于19像素的元素,高度会被当做19像素处理
解决方法:增加font-size:0;(但是任然有点小问题)
(haslayout)根据元素内容大小或者父级的父级大小来重新计算元素宽高,影响haslayout的css属性有:
display:inline-block;
height:任何值(除了auto)
float:left或者right;
width:任何值(除了auto);
zoom:除了normal外任何值;(zoom的作用就是放大或者缩小,为1时不变)
在IE6、7中只要设置了上面的任一属性,便会触发haslayout;
overflow 属性,当盒子的内容超出盒子的高度时,可以使用该属性:
overflow:auto;表示溢出显示滚动条;
overflow:scroll;表示默认显示滚动条;
overflow:hidden;表示溢出隐藏;
在IE6下,块属性有浮动和横向的margin,横向的margin会被放大成两倍;这种现象称为IE6下的块属性加浮动后的双边距bug,行内元素没有此问题;
解决方法,给块元素加dispaly:inline;
在IE6、7下,li本身没有浮动,但是里面的元素浮动了,li就会多出来几px间隙。
解决办法:
(1)给li加浮动,同事也要加宽度,但是该方法比较麻烦,会牵连一些问题;
(2)给li加vertical-align:top/middle/bottom;
vertical-align:top/middle/bottom表示垂直对其方式;
vertical-align还用来解决图片空隙;
在IIE6下高度小于19像素,高度会被当做19像素处理;
解决方法:
(1)给元素增加font-size:0;(但是该方法有局限性,当小于2px时,任然无法解决,会被默认为2px)
(2)给元素增加overflow:hidden;