|
标准流（Normal Flow）。 也叫普通流，标准流实际上就是网页内标签元素正常排列的顺序。 比如块级元素会独占一行，行内元素会按顺序依次从左向右，从上而下排列；按照这种大前提的布局排列之下绝对不会出现列外的情况，叫做标准流布局，也称流式布局。 浮动（float）浮动的盒子可以向左或向右移动，直到它的外边缘碰到包含盒子或另一个浮动盒子的边框为止。 浮动的本质：就是解决图片和文字并排的格式问题。 元素浮动后，会脱离标准流，但还是会影响标准流的布局。 浮动做布局仅仅是附带来的，是滥用的结果。本质是用于图文排版。
浮动的元素不占用标准流的空间，但是会影响标准流中文本的排版。 属性值：none 无浮动（默认值），left左浮动，right 右浮动。 浮动特性：1. 浮动脱离标准流，不占位置，但会影响标准流。浮动只有左右浮动。 2. 浮动的元素B的排列位置，跟上一个元素（块级）A有关系： Ø 若A有浮动，则B的顶部会和A的顶部对齐； Ø 若A是标准流，则B的顶部会和A的底部对齐。 3. 一个父盒子里面的子盒子，如果其中一个子级有浮动，则其他子级都需要浮动，这样才能一行对齐显示。 4. 浮动根据元素书写的位置来显示相应的浮动。 5. 元素添加浮动后，会具有行内块元素的特性。如果没有设置宽高，则元素的大小完全取决于定义的大小或者默认的内容多少。也就是具有了包裹性。
6. 浮动具有破坏性，元素浮动后，破坏了原来的正常流布局，造成内容塌陷。 父容器高度塌陷：
如果一个标准流中没有设置高度的父盒子里所有的子元素都进行了浮动，那么父容器整个高度会塌陷。 如何实现自适应包裹浮动子元素： 给父盒子加：overflow:hidden;/*超出的部分进行隐藏*/ overflow可以触发元素的BFC（ Block Formatting Context：块格式化上下文），可以让元素具有独立排版的空间和权限，在BFC内部所有的元素都依据父元素进行排版和布局，所以父元素具有了包裹性，这就是解决高度塌陷问题的原理。
另外，浮动、定位、display:table、table-cell等也都可以触发BFC。 overflow属性的应用：
当盒子内元素超出盒子自身的大小时，内容就会溢出（IE6除外，它会自动扩展盒子的大小），这时如果想要规范溢出内容的显示方式，就需要使用CSS的overflow，其基本语法格式如下： 选择器{overflow:属性值;
| 
收藏
淘帖
踩
