浮动详解
1.浮动属性
语法:float:none/left/right;
注:*浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
*浮动后的元素会脱离标准流(不会脱离文本流)
*浮动后的元素相当于置换元素元素(一行显示多个、可以设置宽高)
注意:
1.浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动,多出的盒子会另起一行显示
2.如果行内元素有了浮动,则不需要转块级,因为是行内块元素可以直接设置宽高
2.为什么需要清除浮动
1.由于父级盒子很多情况下,不方便给高度,但是盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子
2.清除浮动的本质就是清除浮动元素造成的影响
3.如果父盒子本身有高度,则不需要清除浮动
4.清除浮动之后,父级元素就会根据浮动的子盒子自动检测高度,父级有了高度就不会影响下面的标准流
语法:clear:left(清除左浮动)right(清除右浮动)both(同时清除两侧浮动影响)
清除浮动的方法:
1.额外标签法:
也称为隔墙法,是W3C的额外做法
额外标签法会在浮动元素末尾添加一个空的标签
例如<div style="clear:both"></div>,或者其他标签等(如<br>等)
标签一定是要块级元素
缺点:添加许多无意义的标签,结构差
2.父级添加overflow:
可以给父级元素添加overflow属性,将其属性设置为hidden,auto或scroll
注意是给父元素添加代码
缺点:无法显示溢出部分
3.:after伪元素法:
:after是额外标签法的升级版,也是给父元素添加
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix(ie6/7专有)
*zoom:1;
缺点:照顾低版本浏览器
4.:双伪元素清除法:
也是给父元素添加
.clearfix:before,.clearfix:after{
content:"0";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
clear:both;{
*zoom:1;
}
缺点:照顾低版本浏览器