网页的常用格式
- 标准流
行内元素单独一行，块级元素是上下显示的，标准流是最稳定的。 - 浮动流
脱离标准流，影响标准流的排布。 - 定位流
完全脱离非标准流，不会影响标准流。
浮动的目的：把多个块级元素放到想要的一行上面。
Float:left right none both
特点：
1 脱离标准流，浮动漂浮在标准流的上面；
2 浮动是左右浮动，块级元素放到想要的一行上面。
为什么要清除浮动？
reason:浮动会影响标准流。
清除浮动的方法 - 父级div定义高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
.div{
width: 200px;
height: 200px;
background: aqua;
}
.left{
width:30%;
height: 100px;
background: blueviolet;
float: left;
}
.right{
width:20%;
height:100px;
background: blue;
float: right;
}
.div2 {
width: 300px;
background: yellow;
}
</style>
</head>
<body>
<div class="div">父级
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
原理：父级div手动定义height,解决了div无法自动获取高度的问题。
缺点：只适合高度固定的布局，要给出精确的高度。
- 结尾处加上空div标签 clear:both;
<div class="div2">
父级
<div class="left">左边</div>
<div class="right">右边</div>
<div style="clear: both"></div>
</div>
原理：让父级div自动获取高度
- 父级div定义伪类：after和zoom
.divf{
width: 300px;
background:red;
zoom: 1;
}
.divf:after{
display: block;
visibility: hidden;
content: "";
clear: both;
height:0;
}
- 父级div定义overflow:hidden
原理：必须定义width和zoom：1，同时不能定义height,浏览器会自动添加高度；
缺点：不能和position配合使用，因为超出范围的会被隐藏 -
父级div定义overflow:auto
原理：同上
缺点：内部高度超过父级高度，会出现滚动条。
还有其他方法，不做描述。
