注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

详解position、float、清除浮动  

2016-03-22 22:45:28|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


/* 关键字值 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* 全局值 */
position: inherit;
position:initial;
position: unset;


=======================
static
这个关键字使得这个元素使用正常的表现,即元素处在文档流中它当前的布局位置,toprightbottomleft 和 z-index 属性无效。

relative
使用这个关键字来布局元素就好像这个元素没有被设置过定位一样。即会适应该元素的位置,并不改变布局(这样会在此元素原本所在的位置留下空白)。position:relative对table-*-group, table-row, table-column, table-cell, table-caption无效。
left和right等是相对于父元素的。

absolute
不为元素预留空间,元素位置通过指定其与它最近的非static定位的祖先元素的偏移来确定。绝对定位的元素可以设置外边距(margins),并且不会与其他边距合并。
脱离了文档流。因为边距不会和其他边距合并,所以会受到父元素padding的影响。

fixed
不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间,并且该元素的位置在屏幕滚动时不会发生改变。打印时元素会出现在的每页的固定位置。fixed属性通常会创建新的栈环境。




float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;

Values

left
Is a keyword indicating that the element must float on the left side of its containing block.
指的是元素必须在他的容器内向左侧浮动。
right
Is a keyword indicating that the element must float on the right side of its containing block.
指的是元素必须在他的容器内向右侧浮动。
none
Is a keyword indicating that the element must not float.
指的是元素不能浮动。

How floats are positioned 浮动怎么定位?

As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.

就像上面说的一样,元素浮动时,就脱离了正常的文档流。它会一直向左或向右浮动,直到接触到它的容器边缘或者另一个浮动元素。

In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second "left" red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.

如下图片中有三个方形。两个左浮动,一个右浮动。注意第二个左浮动的红色方框放在了第一个的右侧。其他方框也会放到它的右侧,直到充满容器,之后他们会换行。

详解position、float、清除浮动 - 湖小叶叶 - 米欧光影工作室
 

Clearing floats 清除浮动

In the example above, the floated elements are shorter vertically than the block of text they're floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read "Lorem ipsum dolor sit amet," and was followed by another heading of the same style as the "Floats Example" heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we'd need to clear the floats.

以上例子中,垂直方向上,浮动元素比其所在的文字区域要短。但是,如果文字不足以包含所有浮动的底部,我们可能看到意料之外的效果。上例中,如果段落很短,只有"Lorem ipsum dolor sit amet,",紧跟着另一个同样浮动的标题"Floats Example" ,第二个标题将会出现在红框之间。很可能,我们想让另一个标题同样左对齐。为了达到这个目的,我们需要清除浮动。

The simplest way to clear the floats in this example is to add the clear property to the new heading we want to be sure is aligned left:

例子中最简单清除浮动的方法是给需要左对齐的标题添加清除属性:

h2.secondHeading { clear: both; }

However, this method only works if there are no other elements within the same block formatting context that we do want the heading to continue to appear next to horizontally. If our H2 has siblings which are a sidebars floated to the left and right, using clear will force it to appear below both sidebars, which is probably not what we want.

然而,只有当这个块上下文中没有其他元素时,这个方法才可以。如果我们的H2标签有一个向左向右浮动的上下文侧栏,使用清除将会使它出现在两个侧栏以下,这不是我们想要的。

If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats' container. Referring to the example above again, it appears that all three red boxes are within a P element. We can set the overflow property on that P to hidden or auto to cause it to expand to contain them, but not allow them to drop out the bottom of it:

如果清除他们底部的浮动不行,另一个途径是限制浮动容器的块格式上下文。再次参考上面的例子,所有的3个红框都在p标签中。我们可以设置p标签的overflow属性为hidden,或者使用auto来让扩展p标签装下他们,但是不让他们掉到p标签底线以下。

p.withRedBoxes { overflow: hidden; height: auto; }
[?] Block formatting context 怎么翻译?块状格式上下文?


===============================
清除浮动
如果一个div中的图片太大,超出了div框,给div增加一个clearfix即可解决。 
.clearfix {
  overflow: auto;
}







------------
http://ife.baidu.com/task/detail?taskId=3

参考资料



学习布局:http://zh.learnlayout.com/

  评论这张
 
阅读(218)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018