浮动和标准流

1.设计稿

清空所有的边距

从外向内，从上面到下

2.网页布局方式

1）标准流排版方式

【1】浏览器默认的方式

【2】块级元素，行内元素，行内块级元素

【3】水平排版

垂直排版 ,如果元素为块级元素，垂直排版

水平排版，如果元素为行内元素/行内块级元素

2）浮动流的排版方式

【1】和父类的最左边和最右边对齐使用float

【2】浮动流是半脱离标准流的排版方式

【3】只有一个水平排版，只有左右，没有中间

不可以使用margin：0 auto;

【4】在浮动流中不区分块级元素，行内元素，和行内块级元素

【5】在浮动流中无论是块级元素，行内元素，和行内块级元素都可以设置宽高，和标准流中的行内块级元素一样

【6】浮动元素的脱标

脱标：脱离标准流，当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标

脱标之后的影响：如果前面一个元素浮动了，后面一个元素没有浮动，那么这个时候前面的一个元素会覆盖后面一个

【7】浮动元素的排序规则

1）相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面

样式 显示

2）不同方向上的浮动元素，左浮动会找左浮动

3）浮动元素浮动之后的位置，由浮动元素之前在标准流中的位置来确定

样式 显示 若box4也是左浮动，显示为上面的

【8】浮动元素贴靠现象

当父元素的不可以放的下的时候，将最后一个浮动元素往前贴靠，以此往前找浮动元素

排版

浮动元素不会覆盖没浮动元素的内容，自围现象

样式显示 代码

【9】在企业开发中，水平方向上多用浮动流来布局，垂直方向按照标准流来布局

【10】浮动元素的高度问题

1.在标准流中内容的高度可以撑起父类元素的高度

2.浮动流中浮动的元素是不可以撑起父元素的高度的