首页 > Web开发 > 详细

CSS六:浮动

时间:2017-07-21 12:19:54      阅读:268      评论:0      收藏:0      [点我收藏+]

一、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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!