百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>percent</title>
<style>
article img {
float: right;
width: 50%;
}
article{
border: solid greenyellow 1px;
}
.clearfix{
overflow: auto;
}
</style>
</head>
<body>
<article class="clearfix">
<img src="https://profile.csdnimg.cn/2/E/9/1_funkstill" alt="..">
你甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度！
</article>
</body>
</html>
百分比宽度布局
可以用百分比做布局，但是这需要更多的工作。在下面的例子中，当窗口宽度很窄时
nav的内容会以一种不太友好的方式被包裹起来。总而言之，选一种最合适内容的方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>percentlayout</title>
<style>
nav {
float: left;
width: 25%;
border: solid greenyellow 1px;
}
section{
margin-left: 25%;
border: solid yellow 1px;
}
div {
border: solid red 1px;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<div class="container clearfix">
<nav>
<ul>
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
<li><a href="#">ddd</a></li>
</ul>
</nav>
<section>
当布局很窄时， nav 就会被挤扁。更糟糕的是，不能在 nav 上使用 min-width 来修复这个问题，因为右边的那列是不会遵守它的。
</section>
<section>
I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.
</section>
</div>
</body>
</html>
