CSS彻底研究(3)-浮动,定位_html/css_WEB-ITnose-html教程-PHP中文网

CSS彻底研究(3)-浮动,定位_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 11:20:18

原创

1181 人浏览过

CSS彻底研究(3)-浮动,定位

一 . 浮动float

I . 定义及规则

float默认为none,对应标准流的情况。当float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。

II . 演示规则

准备代码

<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { margin: 0; padding: 0; } #father { background-color: cyan; /*父级div 没有定位 造成子div的margin-top传递给父级*/ position: absolute; } #father * { margin: 10px; padding: 10px; border: 1px dashed red; } #son1 { } #son2 { } #son3 { } </style></head><body> <div id="father"> <div id="son1">#son1</div> <div id="son2">#son2</div> <div id="son3">#son3-son3son3son3</div> <p> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 </p> </div></body></html>

登录后复制

中间给#father加上position:absolute,是为了消除未定位父div的margin-top传递问题,见http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html
显示效果为
1,2的float分别为left right时,有

可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合
当1,2,3全都float left时

文字围绕着float过的div
1,2左浮动，3右浮动，当窗口宽度减小时，3会被挤下来

当3左浮动，2右浮动的时候，显示为

当浏览器窗口宽度减小时，猜猜谁会被挤下来，son2么？

答案还是son3，规则为：写在html文件中后面的会被挤下来，在html文件中，son3在son2后面，因此总是son3先挤下来。
增加son1高度，son3挤下来时会卡在那里
删除盒子中的文字，3个子div全部左浮动
显示为

父div中的三个子div全部脱离标准流了,父div就缩成一条线了,可以用clear来修正
加一个margin-padding-border全为0,clear为both的空div,来撑大父div

III . clear清除浮动

如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.

二 . 定位position

position取值有static absolute relative fixed

1. static

这个是默认的,即标准流排下来,就是static定位方式.

2. fixed

在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
练习做个回到顶部玩玩

<div id="backToTop">    回到顶部</div>

登录后复制

#backToTop{    width: 100px;    height: 50px;    background-color: red;    color: white;    cursor: pointer;    border-radius: 25px 0 0 25px;    padding-left: 20px;    text-align: center;    line-height: 50px;    position: fixed;    bottom: 80px;    right: 0;}

登录后复制

显示效果