CSS 的浮动和清除
程序员文章站
2022-03-29 23:29:14
...
浮动的元素可以理解为该元素脱离文档流。“已经不存在了”
浮动只有两个方向：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>上一篇： HTML 解决浮动问题的四个方法