CSS浮动有关问题

2013-10-30

CSS浮动问题为什么要对浮动进行清除，所谓的清除指的是什么？[解决办法]因为防止下面的元素显示到与浮动元素

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>

热点排行