前提
当div中的内容和高度超出了其高度，就会在边框之外显示；而且，如果之后的div还有内容，就会和超出的内容发生重叠。这是溢出
为了解决内容溢出的问题，css提供了一个overflow的属性。
- overflow：溢出。
- 作用：用于处理内容溢出的问题。
- 有四种属性值：
- visible：表示可见，它是默认值
- hidden：表示隐藏。 效果如下
- scroll：生成一个滚动条。 效果如下
- auto：自动。 效果如下
注意：
产生滚动条之后，width不变，而内容区域随之减少。
overflow还有一个特性，可以解决浮动造成的塌陷问题。
在实际开发中，在使用overflow的时候，最常用的一个设置如下：
overflow：hidden;
浮动布局
1.浮动的基本使用
图文环绕，实现网页布局。
使用：float：属性值
- 常用的属性值有两个：left，right
浮动的特点：三大特征
-
包裹性：如果一个块级元素，在没有设置width的情况下（前提条件），一旦使用了float，那么他的width就会发生变化，尽量最小，能够完全包裹其中内容即可。
-
破坏性：在一个块级容器中（如div），如果它的子元素，都有浮动（比如float），并且没有清除这个浮动，那么块级容器将会塌陷。这就是浮动的破坏性。
如何解决由于破坏性导致的塌陷问题呢？
技巧，有如下几种方式：
1.在块级容器中，使用overflow:hidden就可以，如图：
显式的给块级元素指定一个height值，如图：
-
块级域：如果一个行内元素，设置了浮动（left或right）之后，它就会变成块级框，就可以设置其盒模型的所有属性，如width和height。
最经典的就是给a标签加浮动。
浮动的具体表现：
关于规则1的说明
第一小条：浮动元素的左（右）外边界不能超出其包含块的左（右）边界
第二小条：一个浮动元素的顶端不能比父元素的内顶端更高。
规则3：元素不能一直浮动到其父元素的顶端。
浮动的本质
在css中，所有的内容都是一个元素。纯文本也是。
在块级元素中，包含的一定是行内元素，行内元素才是描述内容的标签。
- 首先自左至右进行排列，
- 如果内容超出一行，会重起一行
如果一个行内元素不止一行，则会形成多个行内框。每一行就是一个框。（是矩形的）
有一个概念，就是正常文档流，
只要是流动布局，所有的内容都是属于正常文档流的。
如果使用了浮动布局，使用了float之后，那就不一样了。
浮动之后，它会脱离正常的文档流，但是不是完全脱离，还是会影响内容的。
由于浮动并不是完全脱离文档流的，所以浮动的元素还是需要占据空间，这个空间是不会被其它内容占据。
关于浮动的清除，使用clear既可以了。
如果是解决父元素塌陷的问题，使用overflow：hidden就可以。
如果是其它情况，就需要使用clear：both。
display详解
- display：显示的意思
- 作用：用来设置元素的显示形态
- 格式：display：属性值
其中，属性值有如下几个： - block，块
- inline，行内
- none，隐藏
- inline-block，行内快。
dislay就像是做变性手术。
注意点：
none，表示不显示当前的元素，当设置为none，完全不占据页面的任何空间。
inline-block：将元素设置为行内块元素
