JSFiddle - React, Tailwind, and code Playground

by XianfaLang

HTML

<!-- 宽度值与浮动之间的关系 -->
<div class="header">头部信息</div>
<hr />
<div style="width:auto;background-color:#999999;">width:auto;background-color:#999999;</div>
<hr />
<div style="width:auto;padding:0 10px;background-color:#EEEEEE;">width:auto;padding:0 10px;background-color:#EEEEEE;</div>
<hr />
<div style="width:auto;margin:0 10px;background-color:#999999;">width:auto;margin:0 10px;background-color:#999999;</div>
<hr />
<div style="width:auto;padding:0 10px;margin:0 10px;background-color:#EEEEEE;">width:auto;padding:0 10px;margin:0 10px;background-color:#EEEEEE;</div>

<hr />

<div style="float:left;width:auto;background-color:#999999;">float:left;width:auto;background-color:#999999;</div>
<hr />
<div style="float:left;width:auto;padding:0 10px;background-color:#EEEEEE;">float:left;width:auto;padding:0 10px;background-color:#EEEEEE;</div>
<hr />
<div style="float:left;width:auto;margin:0 10px;background-color:#999999;">float:left;width:auto;margin:0 10px;background-color:#999999;</div>
<hr />
<div style="float:left;width:auto;padding:0 10px;margin:0 10px;background-color:#EEEEEE;">float:left;width:auto;padding:0 10px;margin:0 10px;background-color:#EEEEEE;</div>
<hr />
<div class="footer">底部信息</div>

CSS

* {
	margin:0;
	padding:0;
	font-size:12px;
}
div {
	height:30px;
	line-height:30px;
}
hr {
	clear:both;
}
.header, .footer {
	height:50px;
	text-align:center;
	line-height:50px;
}