浮动模型，开始之初是为了解决图文布局而产生的。大家都知道，块级元素是按照从上到下排列的，并且尽管设置了宽度仍然独自霸占一行，如何让块级元素不独占一行，让在宽度之外让其他标签占用呢？这就需要浮动模型了。
要设置浮动，就要设置一个float属性。这个float属性有三个值，分别是left左浮动，right又浮动和none不浮动。设置了float属性的元素，会向一边靠拢，直到触碰到标签的边界为止（在盒模型中边界包括margin）。如以下代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
height: 20px;
width: 100px;
background-color: red;
}
.div2{
height: 20px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">演示1</div>
<div class="div2">演示2</div>
</body>
</html>
将其中的css样式改为
.div1{
height: 20px;
width: 100px;
background-color: red;
float: left;
}
.div2{
height: 20px;
width: 100px;
background-color: blue;
float: left;
}
就可以看到，两个块级元素乖乖的排在一行上了（大家也可以试着把其中一个left改为right，可更直观了解float属性）
当然，设置了float属性的元素依然处于标准文档流中，会对后面的元素产生影响，例如这段代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
height: 20px;
width: 100px;
background-color: red;
float: left;
}
.div2{
height: 20px;
width: 100px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div class="div1">演示1</div>
<div class="div2">演示2</div>
<p>1111111111111111111111111111111111111</p>
</body>
</html>
我们想让<P>标签在<div>下面，但是由于设置了浮动，它跑到两个div标签中间去了，达不到我们期望的效果，怎么办，当然有办法。
常用的清除浮动的影响的有clear，分别可以设置left，right 和 both，分别代表清除左浮动影响，清除右浮动影响和同时清除两个浮动影响。另外还有可以设置元素宽度width：100%或者固定宽度，并且设置overflow：hidden属性，也就是超出宽度自动隐藏属性（也就是移出属性）。对上述代码加上
p{
clear: both;
}
或者
p{
width: 100%;
overflow: hidden;
}
都能达到想要的效果。
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
