前端学习笔记十二

浮动

6.1标准流（流式布局）

实际就是网页内标签元素正常排列。比如块级元素独占一行，行内元素按顺序从左到右，从上到下排列

6.2浮动的本质是文字排版文字环绕效果。

6.3浮动特性

6.3.1浮动白驼标准流，不占位置，但会影响标准流

6.3.2浮动元素a排列为止跟上一个元素有关。如果上一个元素有浮动，则a元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则a元素的顶部会和上一个元素底部对齐。

6.3.3一个父盒子中有子盒子，如果其中一个子级有浮动，则其他子级也需要浮动，这样才能一行对齐。

6.3.4元素添加浮动后，元素会具有行内块元素的特性.

6.3.5浮动具有破坏性，元素浮动后，会造成内容塌陷

6.4父容器高度塌陷

   如果一个标准流中的盒子所有的子元素都进行了浮动，而且盒子没有设置高度，那么父容器整个高度会塌陷。使用overflow：hidden可以让没有设置高的盒子在子元素全部浮动时还具有包裹性。

6.5 overflow属性

当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外）。

有四个值：默认值visible内佛那个不会被修剪，会呈现在元素框外

Hidde溢出隐藏

Auto在需要时产生滚动条

Scroll在浏览器中始终显示滚动条

6.6清除浮动

Clear属性有三个值，left清除左浮动right清除有浮动both同时清除左右两侧浮动