CSS学习之四 浮动

<div class="test1">
<img src="https://.jb51./travel/20040301/images/101855_1.jpg" width="100px" height="200px" alt="picture" />
<p class="box">在春天的江南乡间，。。。。。。</p>
<span class="inline">在春天的江南乡间，。。。。。</span>

<span class="inline" style=" margin: 30px; ">在春天的江南乡间，。。。。。</span>
</div>
<div class="test2">
<p>
<span>在春天的江南乡间，。。。。。。</span>
<span class="float display">在春天的江南乡间，。。。。。。</span>
<span>在春天的江南乡间，。。。。。。</span>
</p>
<hr />
<p>
<span>在春天的江南乡间，。。。。。</span>
<span class="float">在春天的江南乡间。。。。。</span>
<span>在春天的江南乡间，......</span>
</p>
</div>

{ margin: 0; padding: 0; }
body { font: 12px/1.5 Verdana, Tahoma, "宋体", sans-serif; padding: 50px; }
.test1, .test2 { border: 1px solid #000; margin: 50px auto; overflow: hidden; }
img { border: 1px solid green; float: left; margin: 50px; padding: 1px; }
.box { background: #EEE; border: 1px solid green; width: 400px; height: auto; margin: 30px; }
.inline { background: #EEE; border: 1px solid green; }
.test2 p { margin: 20px; }
.float { background: red; color: #FFF; float: left; }
.display { display: block; }
h1, ol, strong { color: red; }

<div class="wrapper">
<div class="main">
<div class="float left"><p>浮动元素1
浮动元素的左外边界不超出其包含块的左内边界</p></div>
<div class="float right"><p>浮动元素2
浮动元素的右外边界不超出其包含块的右内边界</p></div>
<div class="noFloat">
<p>非浮动元素！...... </p>
</div>
</div>
</div>

.wrapper { background-color: #EEE; border: 5px solid #999; margin: 50px auto; padding: 20px; width: 90%; overflow: auto; }
.main { border: 1px solid #999; padding: 1px; float: left; / 为了让包含子浮动元素的父元素显示出来，可以设置此父元素浮动