css中的清除浮动{clear:both;}和无浮动{flaot:none;}的区别和具体用法?

html-css016

css中的清除浮动{clear:both;}和无浮动{flaot:none;}的区别和具体用法?,第1张

clear:both是为了不让浮动的内容影响别的标签,所以要清除浮动

float:none我用过几次都是因为原先已经用过float:left或者float:right但是由于是控件或者公用的样式,如果改了会影响较大,就用float:none覆盖原先的样式。

这么说不知道能不能明白,最好有个实例。

背景图片路径错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title>jQuery模拟select控件</title>

<style type="text/css">

.header{

width:1000px

height:86px

background:url(../bg1/bg.png) repeat-x

z-index:-1

}

.logo{

float:left

margin-top:3px

margin-bottom:0px

width:380px

z-index:0

}

.xiala{

float:right

margin-top:-10px

width:200px

font-family:黑体

margin-right:30px

margin-left:auto

text-align:right

z-index:0

}

#daohang{

float:right

width:550px

margin-bottom:12px

}

#daohang li{

float:left

}

#daohang ul{

list-style-type:none

}

#daohang li a{

width:80px

text-align:center

display:block

text-decoration:none

border-left:1px solid #999

margin:1px

}

</style>

</head>

<body>

<div class="header">

<div class="logo">

<img src="../bg1/bg_left_top2.png" />

</div>

<div class="xiala"><!--这部分是下拉菜单-->

<form method="post" style="width:200pxtext-align:center">

<p><label for="xiala">哈贝利日化:</label>

<select name="xiala" id="xiala">

<option value=" http://www.shhbl.cn/ " class="zonggongsi">总公司</option>

<option value=" http://www.dlhbl.cn/ " class="dlhbl">大连分公司</option>

<option value=" http://coco8558.b2b.hc360.com/ " class="bjhbl">北京分公司</option>

</select></p>

</form>

</div>

<div id="daohang">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">企业简介</a></li>

</body>

</html>