CSS 的浮动和清除

来源：互联网发布：ubuntu autotools 编辑：程序博客网时间：2024/05/19 18:11

浮动的元素可以理解为该元素脱离文档流。“已经不存在了”

浮动只有两个方向：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>

阅读全文

0 0