css浮动——2017.2.28

标准流 normal flow

标准流实际上就是一个网页内标签元素正常排列的顺序的意思；

比如块级元素会独占一行，行内元素会按顺序依次从左向右，从上向下排列；

按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局，也称做流式布局。

浮动的本质

就是word中图片和文字混排

float: left;

总结：浮动的元素会不占据标准流的空间。但是会影响标准流文字的排版

浮动特性

1.浮动脱离标准流，不占位置，但会影响标准流。浮动只有左右浮动。

2.浮动的元素A排列位置，跟一个元素（块级）有关系，如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐

3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示

4.浮动根据元素书写的位置来显示相应的浮动

5.元素添加浮动后，如果没有设置宽高，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。也就是具有了包裹性。

6.浮动具有破坏性，元素浮动后，破坏原来的正常流布局，造成内容塌陷。

父容器高度塌陷

如果一个标准中的盒子所有的子元素都进了浮动，而且盒子没有设置高度，那么父容器整个高度会塌陷

overflow: hidden;   超出的部分进行隐藏

当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外）,这时如果想要规范溢出内容的显示方式,就需要使用css的overflow属性

visible:内容不会被修剪，会呈现在元素框之外（默认值）

hidden:溢出内容会被修剪，并且被修剪的内容是不可见的

auto:在需要时产生滚动条，即自适应所要显示的内容

scroll:溢出内容会被修剪，且浏览器会始终显示滚动条

补充BFC

overflow 可以触发元素的BFC，可以让元素具有独立的排版的空间和权限，在bfc内部所有的元素都依据父元素进行排版和布局，所有父元素具有了包裹性，这就是解决高度塌陷问题的原理

  比如：浮动也可以触发bfc,再有 定位、overflow、display:table、table-cell...