标准流代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标准流文档</title>
<style type="text/css">
#header,#footer{height:50px;background:#ccc;}
#content{height:300px;background:#399;}
</style>
</head>
<body>
<h3>块状元素示例</h3>
<p id="header">页头</p>
<p id="content">内容</p>
<p id="footer">页脚</p>
<h3>内联元素示例</h3>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.ifeng.com">凤凰网</a>
<a href="https://www.cnblogs.com">博客园</a>
</body>
</html>
示例图
标准流布局
float属性的含义：
元素使用了float属性后，可以使该元素脱离标准流本身，浮动在其他元素之上，使其不再占用原本属于该元素的空间，这样会导致后面的元素上移并占用原本属于该元素的空间。
对内容块和A标签使用浮动属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动元素示例子</title>
<style type="text/css">
#header,#footer{height:50px;background:#ccc;}
#content{background:#399;}
#content{float:left;}
a{float:left;width:100px;}
</style>
</head>
<body>
<h3>块状元素浮动示例</h3>
<p id="header">页头</p>
<p id="content">内容</p>
<p id="footer">页脚</p>
<h3>内联元素浮动示例</h3>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.ifeng.com">凤凰网</a>
<a href="https://www.cnblogs.com">博客园</a>
</body>
</html>