浮动与清除浮动

文档流

盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写先排,每个盒子都占据自己的位置.

浮动

1.浮动元素,碰到父级元素边界/浮动元素/未浮动元素会停下来

2.相邻浮动的块元素可并在一行,超出父级宽度就换行

3.让行内元素或块元素自动转化为行内块元素

4.未浮动元素会占据浮动元素位置,没有浮动元素的文字会避开浮动的元素,形成绕图效果

5.父元素内整体浮动元素无法撑开父级元素

6.浮动元素之间没有垂直margin的合并

清除浮动

子级元素float.父级需清除浮动.

clearfix:before,clearfix:after{

content=""; /*在元素前元素后分别加入空白字符*/

display:table; /*使该元素按table样式渲染 就是添加一个表格样式*/

}

CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。

clearfix:after{

clear:both; /*让子级撑开父级高度*/

}

clearfix{

zoom:1; /*兼容ie浏览器*/

}