一、浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 600px;
height: 200px;
background-color: red;
/*
* 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
* 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
* 使用float来使元素浮动，从而脱离文档流
* 可选值：
* none，默认值，元素默认在文档流中排列
* left，元素会立即脱离文档流，向页面的左侧浮动
* right，元素会立即脱离文档流，向页面的右侧浮动
*
* 当为一个元素设置浮动以后（float属性是一个非none的值），
* 元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
* 元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
* 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
* 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
*/
float: left;
}
.box2{
width: 600px;
height: 200px;
background-color: yellow;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
二、文字环绕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
/*
* 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，
* 所以我们可以通过浮动来设置文字环绕图片的效果
*/
/*box1向左浮动*/
float: left;
}
.p1 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。
他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，
而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，
她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，
蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，
连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。
但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，
使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，
却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。
</p>
</body>
</html>
三、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
/*
* 在文档流中，子元素的宽度默认占父元素的全部
*/
background-color: #bfa;
/*
* 当元素设置浮动以后，会完全脱离文档流.
* 块元素脱离文档流以后，高度和宽度都被内容撑开
*/
/*float: left;*/
}
.s1 {
/*
* 开启span的浮动
* 内联元素脱离文档流以后会变成块元素
*/
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>
四、简单布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除默认样式*/
* {
margin: 0;
padding: 0;
}
/*设置头部div*/
.header {
/*设置一个宽度*/
width: 1000px;
/*设置一个高度*/
height: 120px;
/*设置一个背景颜色*/
background-color: yellowgreen;
/*设置居中*/
margin: 0 auto;
}
/*设置一个content*/
.content {
/*设置一个宽度*/
width: 1000px;
/*设置一个高度*/
height: 400px;
/*设置一个背景颜色*/
background-color: orange;
/*居中*/
margin: 10px auto;
}
/*设置content中小div的样式*/
.left {
width: 200px;
height: 100%;
background-color: skyblue;
/*向左浮动*/
float: left;
}
.center {
width: 580px;
height: 100%;
background-color: yellow;
/*向左浮动*/
float: left;
/*设置水平外边距*/
margin: 0 10px;
}
.right {
width: 200px;
height: 100%;
background-color: pink;
/*向左浮动*/
float: left;
}
/*设置一个footer*/
.footer {
/*设置一个宽度*/
width: 1000px;
/*设置一个高度*/
height: 120px;
/*设置一个背景颜色*/
background-color: silver;
/*居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 头部div -->
<div class="header"></div>
<!-- 主体内容div -->
<div class="content">
<!-- 左侧div -->
<div class="left"></div>
<!-- 中间div -->
<div class="center"></div>
<!-- 右侧div -->
<div class="right"></div>
</div>
<!-- 底部信息div -->
<div class="footer"></div>
</body>
</html>
