1. 文档流布局
想理解文档流布局首先得有几个概念的认识：行内元素、块级元素、行内块级元素
行内元素在文档流中从左到右排列，每个行内元素只占自己内容得以存活的空间，常见的行内元素有：<span>、<a>、<strong>等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
span
{
background-color: yellow;
}
</style>
</head>
<body>
<span class="s1">行内元素test</span>
<span class="s2">行内元素test</span>
<span class="s2">行内元素test</span>
<span class="s2">行内元素test</span>
<span class="s2">行内元素test</span>
<span class="s2">行内元素test</span>
<span class="s2">行内元素test</span>
<span class="s2">行内元素test</span>
</body>
</html>
而块级元素默认占父元素宽度的100%，十分霸道，一占就是一行，常见的块级元素有：<div>、<p>、<h1>~<h6>等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
p,div
{
background-color: yellow;
}
</style>
</head>
<body>
<p>p是块级元素</p>
<div>div是块级元素</div>
<div style="height: 100px;">我是块级元素div,我也可以设置高。<br>而行内元素的高根据内容决定。</div>
</body>
</html>
块级元素可以包含行内元素，但行内元素不可以包含块级元素，css中可以通过display进行元素转化
display:block -> 转为块级元素
display:inline -> 转为行内元素
display: inline-block -> 转为行内块级元素（这样就可以一行放多个块级元素）
2. 浮动布局
使用float可以设置浮动，一旦设置浮动，元素会脱离文档流，在页面上移动，或左或右或上或下，与你的设置有关。
注意元素浮动后，它将不再在文档流中占据位置，文档流中其它元素自动上移。
浮动遵循一下规则：
- 当浮动元素遇到父级元素边框时，会停止浮动
- 当浮动元素遇到其它浮动元素时，会停止移动
- 当浮动元素遇到没有浮动的块级元素时，也会停止浮动
浮动元素级别高于文档流中的元素，一旦设置浮动，元素就脱离文档流了，脱离文档流的元素都是块级元素。
块级元素设置浮动：
- 不再独占一行
- 开始移动
- 配上行内元素可以设置文字环绕图片效果，如下
<!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: black;
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">
.span1
{
background-color: yellow;
}
.span2
{
background-color: green;
float: left;
width: 400px;
height: 400px;
color: white;
}
</style>
</head>
<body>
<div class="box1"></div>
<span class="span1">我是span,一个行内元素,我的宽和高由内容决定</span>
<span class="span2">我虽然是span,但我是浮动的span，我可以自由设置宽和高,我被写在后面还可以飘到前面</span>
</p>
</body>
</html>
3110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
