您的位置：首页 > Web前端 > CSS

CSS 的浮动和清除

2017-07-29 20:05 225 查看
浮动的元素可以理解为该元素脱离文档流。“已经不存在了”

浮动只有两个方向：left，right

  float:left
 float:right
浮动的位置：浮动包含元素的边界。或具有浮动元素的边上。
浮动元素的层次高于普通元素。
凡是浮动的元素都是块元素。
如果浮动前为行内元素，浮动后自动转换为块元素
行内元素没有宽高，只有块元素才有宽高。
凡是设置浮动之后,一定要清除浮动。主要的目的是，清除上面有浮动的属性，对后面的元素造成影响。
（上面的浮动属性，如果不清除，下面的元素会默认继承）
清除浮动的方法:
clear:left,right,both;
.clear:both清除两边，通常用在版权独占一行。
清除的位置：具有浮动属性的最后面
通常用一个空的<div class="clear"></div>

向右浮动
未发生浮动之前
<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" charset="utf-8"/>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
.demo{width:300px;border: 1px solid red;margin:0px anto;}
.test1{width:100px;height:100px;background:red;}
.test2{width:100px;height:100px;background:green;}
.test3{width:100px;height:100px;background:blue;}
</style>
<script type="text/javascript">

</script>
</head>

<body>
<div class="demo">
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>

</div>
</body>
</html>




向右浮动（1）：
<style type="text/css">
.demo{width:300px;border: 1px solid red;margin:0px anto;}
.test1{width:100px;height:100px;background:red;float:right}
.test2{width:100px;height:100px;background:green;}
.test3{width:100px;height:100px;background:blue;}
</style>




向右浮动（2）：

<style type="text/css">
.demo{width:300px;border: 1px solid red;margin:0px anto;}
.test1{width:100px;height:100px;background:red;float:right}
.test2{width:100px;height:100px;background:green;float:right}
.test3{width:100px;height:100px;background:blue;}
</style>



向右浮动（3）：

<style type="text/css">
.demo{width:300px;border: 1px solid red;margin:0px anto;}
.test1{width:100px;height:100px;background:red;float:right}
.test2{width:100px;height:100px;background:green;float:right}
.test3{width:100px;height:100px;background:blue;float:right}
</style>



想左浮动一次：
<style type="text/css">
.demo{width:300px;border: 1px solid red;margin:0px anto;}
.test1{width:100px;height:100px;background:red;float:left}
.test2{width:110px;height:100px;background:green;}
.test3{width:100px;height:100px;background:blue;}
</style>



向左浮动第二次：
<style type="text/css">
  .demo{width:300px;border: 1px solid red;margin:0px anto;}
  .test1{width:100px;height:100px;background:red;float:left}
  .test2{width:100px;height:100px;background:green;float:left}
  .test3{width:210px;height:100px;background:blue;}
  </style>



向左浮动第三次：
<style type="text/css">
.demo{width:300px;border: 1px solid red;margin:0px anto;}
.test1{width:100px;height:100px;background:red;float:left}
.test2{width:100px;height:100px;background:green;float:left}
.test3{width:100px;height:100px;background:blue;float:left}
</style>




案例一：
未发生浮动
<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" charset="utf-8"/>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">

.box{width:960px;border:1px solid red; height:500px;margin:0 auto;}
.left{width:200px;height:400px;border:1px solid blue;}
.right{width:750px;height:400px;border:1px solid green;}

</style>
<script type="text/javascript">

</script>
</head>

<body>
<div class="box">
<div class="left"></div>
<div class="right"> </div>
</div>

</body>
</html>



左浮动一次：
<style type="text/css">

.box{width:960px;border:1px solid red; height:500px;margin:0 auto;}
.left{width:200px;height:400px;border:1px solid blue;float:left;}
.right{width:750px;height:400px;border:1px solid green;}

</style>



两次浮动
<style type="text/css">

.box{width:960px;border:1px solid red; height:500px;margin:0 auto;}
.left{width:200px;height:400px;border:1px solid blue;float:left;}
.right{width:750px;height:400px;border:1px solid green;float:left;}

</style>



<style type="text/css">

.box{width:960px;border:1px solid red; height:500px;margin:0 auto;}
.left{width:200px;height:400px;border:1px solid blue;float:left;}
.right{width:750px;height:400px;border:1px solid green;float:right;}

</style>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  浮动
相关文章推荐
新的分享
章节导航