欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

css浮动有关问题

更新时间: 2014-01-05 00:53:48 责任编辑: Author_N1

 

CSS浮动问题
为什么要对浮动进行清除,所谓的清除指的是什么?
--参考方法--
因为防止下面的元素显示到与浮动元素同一行。

给你一个例子:

*{
    border:0;
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
.list{
    width:600px;
}
.list li{
    background-color:#D2D1FE;
    float:left;
    display:inline;
    width:195px;
    margin-left:5px;
    margin-top:5px;
    height:20px;
}
.clearFloat{
    clear:both;
    float:none;
}


<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<div class="clearFloat"></div>
<p>我很<span style="color:red">丑</span>,但是我很<span style="font-weight:700;">温柔</span>。</p>

你可以尝试修改clearFloat样式查看效果。
--参考方法--
如果在网页的css上使用了float的话那么就会产生浮动的效果,但是有些元素是你不想要他浮动的,那就可以使用clear这个来清除他的浮动效果,clear有四个参数:
none: 允许两边都可以有浮动对象 
both: 不允许有浮动对象 
left: 不允许左边有浮动对象 
right: 不允许右边有浮动对象 



例如下面这段css官方提供的关于clear的代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>clear_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{float:right;background:#eee;}
.test2{clear:right;background:#ddd;}
</style>
</head>
<body>
<div class="test">我将出现在屏幕右方</div>
<div class="test2">注意我出现的位置</div>
</body>
</html>
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:53:48
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1127/
本文WWW.DOC100.NET DOC100.NET版权所有。