float

1. 定义:指定对象是否以及如何浮动.

   • 浮动的框可以左右移动,直到它的外边缘碰到包含块或另一个浮动框的边缘.
   • 如果包含块太窄无法容纳水平排列的3个浮动元素,那么其他浮动块向下滑动,只到有足够空间的地方.如果浮动元素的高度不同,那么它们向下移动时可能会被其他浮动元素卡住.
2. 取值: none(默认) | left | right.

3. 注意点

   • float在绝对定位和display为none时不生效.
   • 如果浮动元素后面有一个文档流中的元素,那么这个元素的框会表现的像浮动根本不存在一样.但是,框的文本内容会受浮动元素的影响,会移动以留出空间.
   • 浮动框旁边的行框被缩短,从而给浮动元素留出空间,因此行框围绕浮动框架,创建浮动框可以使文本可以围绕图像.

Demo

不浮动的框

框1

框2

框3

框1向右浮动

框1

框2

框3

框1向左浮动:注意浮动元素margin不会和父margin合并,同时框1中的文字被浮动元素挤到下面显示

框1

框2

框3

框1,2,3都向左浮动,且框1的高度高于2和3

框1

框2

框3

clear

1. 定义:指出不允许有浮动的边.

   • 框的哪边不应该挨着浮动框(结合浮动中注意点理解).
   • 对元素进行清理实际上是为前面的浮动元素留出了垂直空间.

   Demo

   不使用clear:包裹div无高度

   使用clear:包裹div有高度
2. 取值: none(两边都可以有浮动,默认值)|both(不允许有浮动现象)|left(不不允许左边有浮动)|right(不允许右边有浮动).

3. 清理浮动的方法(不增加额外标签)

   1. 应用值为hidden或auto的overflow属性有一个副作用,会自动清理包含的任何浮动元素.

      Demo

   2. 使用CSS的内容:结合after伪类和内容声明在指定的现有内容的末尾添加新的内容.

      Demo

      clear 属性定义了元素的哪边上不允许出现浮动

      此方法对IE6以及更低版本不起作用,兼容ie需要使用下面代码

      <!--[if IE]>
      <style type="text/css">
          .clearfix {
              zoom: 1;     /* triggers hasLayout */
          }
      </style>
      <![endif]-->
                  

   3. Javascript
   4. css和js的本质是相同的,将它动态的添加到页面中,对于这两种方法需要指定进行清理的元素出现位置,并且需要添加一个类名.

visibility

1. 定义:设置或检索是否显示对象.
2. 取值: visible(可见)|hidden(隐藏)|collapse(主要用来隐藏表格的行或列).

3. 注意

   • 使用collapse隐藏的行或列能够被其他内容使用.对于表格外的其他对象,其作用等同于hidden.
   • 与display属性不同,visibility属性设为hidden隐藏的对象仍占据的物理空间.

Demo

设置为隐藏

上面有一个设置为隐藏的div

overflow

1. 定义:检索或设置对象处理溢出内容的方式.复合属性.

2. 取值

   visible:对溢出的内容不做处理,内容可能会超出容器.

   hidden:隐藏溢出容器的内容且不出现滚动条.

   scroll:隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现.

   auto:当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条.此为body对象和textarea的默认值.

   paged-x(css3)| paged-y(css3)| paged-x-controls(css3)| paged-y-controls(css3)| fragments(css3)

3. 适用范围:块容器,伸缩盒容器,grid容器.
4. verflow的效果等同于overflow-x + overflow-y
5. 关于CCS3新特性pages

Demo

我有很多哦~

我有很多哦~

我有很多哦~

我有很多哦~

我有很多哦~

我有很多哦~

我有很多哦~

我有很多哦~

我有很多哦~

overflow-x

overflow-y