CSS的三种布局机制 浮动 清除浮动

CSS布局的三种机制:普通流(标椎流),浮动和定位.
• 1

普通流在布局中的特点:
为什么用浮动:
为什么要清除浮动:

让盒子从普通流中浮动起来,主要作用让多个块级盒子一行显示
虽然行内块(inline-block)可以解决在一行内显示多个块级元素但是有缺陷,而每个行内块之间有间隙
为什么要浮动:
  让多个块级盒子一行显示,
  实现盒子的指定左对齐右对齐等
  浮动最早是用来控制图片,实现文字环绕图片的效果
什么是浮动:
  设定了浮动属性的元素会脱离标准普通流的控制,移动到指定的位置
语法:选择器{float:属性值;}//none 元素不浮动 left元素向左浮动 right 元素向右浮动
记忆浮动的特点:
  浮动就不属于标准流了,会在标椎流的上方浮动起来,而且把自己的位置让给下一个盒子来占用.也就是俗称的脱标
  float属性会改变元素的display属性,生成类似于行内块
  注意:浮动的元素互相贴靠一起,但是如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
浮动小结: 
  我们使用浮动的核心目的是让多个块级盒子在同一行显示,因为这是常见的布局方式.
    浮:  加了浮动的盒子是浮起来的,漂浮在其他标椎流盒子的上面
    漏:  加了浮动的何止是不占位置的,他原来的位置漏给了标准流的盒子
    特:  特别注意浮动元素会改变display属性,累死转换为行内块,但是元素之间没有空白的间隙

块级元素会独占一行,从上向下顺序排列
  常见的元素有:div,li ul ol,h1-h6,p,hr,dl,form,table
行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
  常用的元素:a,b,strong,span,em,i

让盒子从普通流中浮动起来,主要作用让多个块级盒子一行显示
虽然行内块(inline-block)可以解决在一行内显示多个块级元素但是有缺陷,而每个行内块之间有间隙
为什么要浮动:
  让多个块级盒子一行显示,
  实现盒子的指定左对齐右对齐等
  浮动最早是用来控制图片,实现文字环绕图片的效果
什么是浮动:
  设定了浮动属性的元素会脱离标准普通流的控制,移动到指定的位置
语法:选择器{float:属性值;}//none 元素不浮动 left元素向左浮动 right 元素向右浮动
记忆浮动的特点:
  浮动就不属于标准流了,会在标椎流的上方浮动起来,而且把自己的位置让给下一个盒子来占用.也就是俗称的脱标
  float属性会改变元素的display属性,生成类似于行内块
  注意:浮动的元素互相贴靠一起,但是如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
浮动小结: 
  我们使用浮动的核心目的是让多个块级盒子在同一行显示,因为这是常见的布局方式.
    浮:  加了浮动的盒子是浮起来的,漂浮在其他标椎流盒子的上面
    漏:  加了浮动的何止是不占位置的,他原来的位置漏给了标准流的盒子
    特:  特别注意浮动元素会改变display属性,累死转换为行内块,但是元素之间没有空白的间隙

因为浮动会脱标的,会影响下面的标椎流元素,因此我们需要给浮动的元素添加一个标准流的父亲,这样,最大化的减少了对其他标椎流的影响.
浮动的扩展:
  浮动元素与父盒子的关系:
    子盒子的附佛那个参照父盒子对齐
    不会与父盒子的变框重叠,也不会超过父盒子的内边距
  浮动元素与兄弟盒子的关系:
    在一个父级盒子中,如果前一个兄弟盒子是:
      浮动的,那么当前盒子会与前一个盒子的顶部对齐.
             普通流的,那么当前盒子会显示在掐一个兄弟盒子的下方
注意:浮动只会影响当前的和后面的标准的盒子,不会影响前面的标准盒子
建议:如果一个盒子里面有多个盒子,如果其中的一个盒子浮动了,其他兄弟也应该浮动,防止引起问题

清除浮动的本质:
  清除浮动主要是为了解决父类元素因为子盒子浮动引起内部高度为0的问题,清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级就有了高度,就不会影响下面的标椎流了.
语法:选择器{clear:属性值} //left不允许左侧有浮动元素(清除左侧浮动的影响) right(清除右侧浮动的影响)both(同时清除左右两侧浮动的影响)

通过在浮动元素标签的后面添加一个空的标签<div style="clear:both"></div>
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差

可以给父类添加:overflow为hidden|auto|scroll都可以实现
优点:代码简洁
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素

after方式为空元素额外标签的升级版,好处是不用单独加标签了
写法:
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{/*ie6,7专有*/
    *zoom:1;
}
优点:符合闭合浮动思想,结构语义化正确
缺点:由于ie6-7不支持:after使用zoom:1出发hasLayout
代表网站:百度,淘宝,网易等

.clearfix:before,.clearfix:after{
    context:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}
优点:代码简洁
缺点:由于ie6-7不支持after,使用zoom:1出发hasLayout