CSS学习之四 浮动
网站建设 2021-07-03 08:43www.dzhlxh.cn网站建设
一、先说说浮动的性质吧，请看HTML代码：
<div class="test1">
<img src="https://www.jb51.net/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; }
显示效果部分截图如下：
总结得出浮动元素的基本性质：
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐；
浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
元素设置为浮动之后，就生成一个块级框（css行高提出的概念），没必要再声明display:block，可以设置宽高。
请单击查看Demo
二、接下来细说浮动的几个规则
1、浮动规则1：
浮动元素的左（右）外边界不超出其包含块的左（右）内边界。
HTML代码：
<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; /* 为了让包含子浮动元素的父元素显示出来，可以设置此父元素浮动 *
复制代码
代码如下:<div class="test1">
<img src="https://www.jb51.net/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; }
显示效果部分截图如下：
图1 浮动性质（test1）
图2 浮动性质（test2）
总结得出浮动元素的基本性质：
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐；
浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
元素设置为浮动之后，就生成一个块级框（css行高提出的概念），没必要再声明display:block，可以设置宽高。
请单击查看Demo
二、接下来细说浮动的几个规则
1、浮动规则1：
浮动元素的左（右）外边界不超出其包含块的左（右）内边界。
HTML代码：
复制代码
代码如下:<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; /* 为了让包含子浮动元素的父元素显示出来，可以设置此父元素浮动 *
上一篇：CSS学习之五 定位布局
下一篇：CSS学习之三 字体使用说明