1. 浮动
- 有三个div元素如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellow;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>结果：块元素在文档流中默认垂直排列，所以这三个div自上至下依次排开
- 如果将div改为行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
}
.box3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div><div class="box3"></div>
</body>
</html>结果：注意box1和box2之间，box2和box3之间的区别。和空格有关。
- (1) 如果希望块元素在页面中水平排列，可以使块元素脱离文档流。使用float来使元素浮动，从而脱离文档流。
可选值：
* none 默认值，元素默认在文档流中排列
* left 元素会立刻脱离文档流，向页面的左侧浮动
* right 元素会立刻脱离文档流，向页面的右侧浮动- 当为一个元素设置浮动以后(即float属性是一个非none的值),元素会立刻脱离文档流，元素脱离文档流以后，它下边的元素会立刻向上移动。元素浮动以后，会尽量向页面的左上或者右上漂浮，直到遇到父元素的边框或者其它元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
float: right;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellow;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
float: right;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
float: right;
width: 100px;
height: 100px;
background-color: yellow;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>结果： box1 box2依次浮动在右上方。box2不会超过box1。
- (2) 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
float: right;
width: 100px;
height: 100px;
background-color: yellow;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>结果：box2的浮动并未超过未浮动的块元素box1。
- (3) 浮动的元素不会超过它上边的兄弟元素，最多只会一边齐。举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
float: left;
width: 300px;
height: 100px;
background-color: red;
}
.box2 {
float: left;
width: 300px;
height: 100px;
background-color: yellow;
}
.box3 {
float: right;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
- (4) 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以通过浮动来设置文字环绕图片的效果。举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<p>坚持就是胜利！！！</p>
</body>
</html>结果：
- (5) 在文档流中，子元素的宽度默认占父元素的全部。，当元素设置浮动以后，会完全脱离文档流。块元素脱离文档流以后，高度和宽度都被内容撑开。(默认的宽度和高度由内容决定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
float: left;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
</body>
</html>结果：
- (6)当内联元素在文档流中时，设置宽高不起作用。但是，当span开启浮动后，则内联元素脱离文档流变成块元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.s1 {
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<span class="s1">hello</span>
</body>
</html>结果：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。