浮动，定位，布局

1.在浮动模型中，一个框首先根据常规流向布局，再将它从流中取出并尽可能地向左或右偏移。

   浮动元素与其它元素框的垂直边距不会重叠，重叠是指边距产生交集，包括与其父元素、后代元素之间。

   浮动元素会产生一个块框，如果旁边有一个行框，浮动框会和行框的顶部排成一行。

   图片浮动后，与旁边的文字形成文字环绕图片的效果。

   不浮动的块元素的框宽度并未缩短，只是其内的行框会缩短，以容纳浮动元素。这说明了浮动元素脱离了文档流。

   浮动元素是与不浮动元素时所在行的行框的顶端对齐，而不是整个包含块的顶端对齐。

   浮动的原则：浮动元素向左或向右移动，直到它的外边沿接触到包含块的边沿，或者其它浮动框的外边沿。

   如果浮动元素没有遇到其它浮动元素，则其左右浮动的范围，不会超出其包含块的左右边缘。不同浏览器可能效果不同。

   浮动元素的特点之一，就是可以和其它元素在同一行显示。

 

   float的元素要指定宽度：px，或者百分比。

浮动也可以用于实现在文档中分列。要创建多个列，你需要在HTML代码里用div来结构化想要的各个列：
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>

<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>

<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
#column1 {
float:left;
width: 33%;
}

#column2 {
float:left;
width: 33%;
}

#column3 {
float:left;
width: 33%;
}
如果float为none，三个div会各从新的行开始布局。

 

2.clear

   绕开其它漂浮元素。left，right，none，both，inherit。如果有几个连续的浮动，clear只对第2个开始的起作用，因为第1个元素看不到后面的元素。使用both可达到一个一个元素的效果。

   标识元素的哪一侧不允许出现相邻的浮动框，这个浮动框必须是在静态定位中位于元素的前面。

   如果clear:left 并且左侧有浮动框，元素会跳到下一行显示。

   如果clear:right 并且浮动结果是右侧有浮动框，浮动框会跳到下一行显示。

   设定了clear属性的非浮动元素，会下降到浮动元素的下面，且元素的上边框边与浮动元素的下边距边接触。。。

 

3.position 定位 默认值 static，

 

它是css-p（cascading style sheets position）中的内容，它可以控制任何网页元素在浏览器文档窗口中的位置。

：absolute，relative，fixed。

left：

top：

width：

height：

min-height:

 

在HTML中可以只写width=100，但在CSS中必须给一个准确的单位。只有两个例外情况可以不定义单位：行高和0值。注意：不要在数值和单位之间加空格。

当指定position:fixed;top:5px;left:280px;时，如果用right:20px代替了left:280px，可能会出现元素不能立即显示，滚动页面后才会显示的问题。

 

相对定位的元素属于常规流向布局，只是元素会相对自己的静态定位有所偏移。

direction属性：ltr(left to right)，rtl(right to left)，会影响定位时的规则。

相对定位的框创建一个新的包含块来包含常规流向的子元素和定位的后代元素。常应用于动态提示层。

绝对定位的元素脱离了正常的文档流

fixed与absolute不同的是，fixed元素的包含块总是由视点创建。

行内元素的定位，其祖先元素可能是块级或行级元素，情况变的复杂。

z-index：Z轴。绝对定位的元素可能会与静态的内容发生重叠，可以为每个元素指定一个数字（z-index ），数字较大的元素将叠加在数字较小的元素之上。css中使用堆叠容器 stacking context 来描述这种堆叠现象。

 

 

3.一段文字的右下标效果
<style>
.sample{
width:300px;
border-bottom:3px solid blue;
background-color:red;
float:left;
}
</style>

<div>
<p class="sample">请仅仅用于标题文本。不要仅仅为了产生粗文本文本文本而使用它们不要仅仅为了产生粗体文本而使用它们不要仅仅为了产生粗体文本而使用它们。不要仅仅为产生粗体文本而使用它们不要仅仅为了产生粗体文本而使请用它<span style="float:right;"> 右下标 </span></p>
</div>

 

4.

display 框类型，常用值：block 块元素，inline 行内元素，none：隐藏，不占用空间，inline-block 表现类似行内替换元素

visibility：inherit：继承外层元素的visibility值，visible，hidden：隐藏后仍占用空间。

 

5.overflow

  如果有溢出，overflow指定一个框的裁减情况。clip属性指定裁减的区域和形状。

  overflow:visible 默认值

  hidden，溢出的内容被剪切，

  scroll，元素边框内会出现垂直和水平滚动条，且无论内容是否会溢出，这避免了在动态环境中，滚动条频繁出现和消失。

  auto，根据情况出现垂直或水平滚动条。

 

 

6.clip属性

   clip：可视区域，rect()。

 

7.visibility  visible/hidden