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>

CSS浮动有关问题

相关推荐