menu
more_vert
CSS六:浮动

作者:dayu

一、float属性
取值:
left:左浮动
right:右浮动
none:不浮动

二、浮动的作用
块元素同行排列显示,一般用于排版、分栏显示。
设置浮动属性后,脱离文档流向指定的左或右边对齐,直到父元素的边界或浮动的元素。
注意:
使用浮动后要及时清除,避免影响其后的网页元素。

三、清除浮动的必要性
浮动后,脱离了文档流不占网页空间。
浮动后的网页元素会影响同级元素。
使用clear属性清除浮动
clear属性取值:
left:清除左浮动。
right:清除右浮动。
both:同时清除左、右浮动。
none:不清除浮动。
清除浮动表明容器框的哪边不挨着浮动框。

四、清除浮动的方法
几个并列的盒子同时添加浮动,它们的父级盒子会出现以下几种情况:
1、背景不能显示。
2、边框不能撑开。
如何清除浮动:
方法一:添加新的元素,应用clear:both;
方法二:父级添加overflow:auto;zoom:1;
//zoom:1;是在处理浏览器的兼容性问题。
方法三::after方法
注意:方法三要作用于浮动元素的父级。
例如:
/*==for IE6/7 Maxthon2==*/
#box{zoom:1;}
/*==for FF/chrome/opera/IE8==*/
#box:after{
clear:both;
content:‘.‘;
display:block;
width:0px;
height:0px;
visibility:hidden;
}

五、overflow属性
1、作用
定义溢出元素内容区的内容会如何处理。
2、取值
visible:默认。
auto:自动超出部分有滚动条。
hidden:多余的隐藏。
scroll

CSS六:浮动

原文地址:http://www.cnblogs.com/dotnet261010/p/7216822.html