CSS浮动有关问题
日期：2014-05-16 浏览次数：20826 次
CSS浮动问题
为什么要对浮动进行清除，所谓的清除指的是什么？
------解决方案--------------------
因为防止下面的元素显示到与浮动元素同一行。
给你一个例子：
你可以尝试修改clearFloat样式查看效果。
------解决方案--------------------
如果在网页的css上使用了float的话那么就会产生浮动的效果，但是有些元素是你不想要他浮动的，那就可以使用clear这个来清除他的浮动效果，clear有四个参数：
none： 允许两边都可以有浮动对象
both： 不允许有浮动对象
left： 不允许左边有浮动对象
right： 不允许右边有浮动对象
例如下面这段css官方提供的关于clear的代码：
为什么要对浮动进行清除，所谓的清除指的是什么？
------解决方案--------------------
因为防止下面的元素显示到与浮动元素同一行。
给你一个例子：
*{
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
