web前端---------浮动和溢出

在此之前，我们需要先简单了解CSS中的一种基本的定位和布局机制 -- 流。

流，是HTML中的抽象概念，隐喻这种排列布局方式像水流一样，自然流动。

即div等块级元素从上往下、span等行内元素从左至右排列的布局方式。

也就是说，流实现的总是方方正正，规规矩矩的效果。

1.浮动属性。

属性float    用来控制元素的浮动；

分别由left right none 代表左浮动，右浮动，不浮动；

img{
    float:left;}

实现图片的向左进行浮动；一个设置成left,一个设置成right,就可以实现两边排列；

.box{
    clear:left;}

使用clear可以清除浮动对页面造成的负面影响；

.box{
    clear:both;
}

使用both可以清除前面所有的浮动

2.溢出

默认情况下，溢出是可见的(visible)。设置overflow的属性的值为visible，表示对溢出的内容不做处理，内容会在盒子之外显示。

div{
    overflow:visible;
}

对选择器使用hidden可以隐藏溢出的内容；

div{
    overflow:hidden;
}

使用overflow: scroll;后，会添加滚动条，通过滑动滚动条可以查看元素中的所有内容。

div{
    overflow:scroll;
}

当然，设置overflow的属性的值为auto，只会在必要时添加滚动条。

1. 当内容溢出时，隐藏溢出内容，并添加滚动条；

2. 当内容没有溢出时，不会添加滚动条。

div{
    overflow:auto;
}