CSS学习之四 浮动

当前位置 : 首页 > 网页制作 > CSS > CSS学习之四 浮动

CSS学习之四 浮动

来源: 作者: 时间:2015-11-23 09:27
浮动和定位是CSS布局当中很重要的两种方法,这一篇先讲浮动布局,定位留在下一篇。
浮动和定位是CSS布局当中很重要的两种方法,这一篇先讲浮动布局,定位留在下一篇。
一、先说说浮动的性质吧,请看HTML代码:

复制代码
代码如下:

<div class="test1">
<img src="http://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

 图1 浮动性质(test1)

浮动性质2

图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; /* 为了让包含子浮动元素的父元素显示出来,可以设置此父元素浮动 *
Tag:
上一篇:[css3]
下一篇:CSS学习之五 定位布局
网友评论

<