<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Floating example</title>
<style>
.container{
800px;
border:1px solid #ccc;
margin:20px;
overflow: hidden;
}
.box{
100px;
height:100px;
border:1px dotted black;
background-color:yellow;
margin: 20px;
position: relative;
}
.box span{
position:absolute;
bottom:0px;
right:0px;
}
.float-left{
float:left;
}
.float-right{
float:right;
}
</style>
</head>
<body>
<p>Floating examples</p>
<p>Box1 float to the left.</p>
<div class="container">
<div class="box float-right">
<span>Box1</span>
</div>
<div class="box">
<span>Box2</span>
</div>
<div class="box">
<span>Box3</span>
</div>
</div>
<p>Box1 float to left and under the Box2</p>
<div class="container">
<div class="box float-left">
<span>Box1</span>
</div>
<div class="box">
<span>Box2</span>
</div>
<div class="box">
<span>Box3</span>
</div>
</div>
<p>All box float left</p>
<div class="container">
<div class="box float-left">
<span>Box1</span>
</div>
<div class="box float-left">
<span>Box2</span>
</div>
<div class="box float-left">
<span>Box3</span>
</div>
</div>
</body>
</html>
1 第一个例子,div向右浮动
2 第二个例子,div向左浮动,而且Box1浮动之后脱离文档流,不会影响文档流中其他div的位置,最后被隐藏在Box2的下面
3 第三个例子,所有的div向左浮 原本并没有什么值得说的,但是在敲代码验证的时候发现一个问题,只有当box的父容器带有overflow:hidden ,box好像就不脱离文档流一样,
占据父容器的地盘,暂时不知道为什么.
第3个总结中的问题知道是怎么回事了.
overflow 属性定义在包含的内容对于指定尺寸太大的情况下元素应该怎么样.在默认情况下,内容会溢出框外,进入相邻的空间.
应用值为auto或者hidden的属性有一个有用的副作用,这会自动清理包含的所有浮动元素.