浮动和标准流

1.设计稿

清空所有的边距

从外向内,从上面到下

2.网页布局方式

1)标准流排版方式

【1】浏览器默认的方式

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

【3】水平排版

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

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


2)浮动流的排版方式

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

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

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

不可以使用margin:0 auto;

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

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

【6】浮动元素的脱标

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

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

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

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


浮动和标准流_第1张图片
样式


浮动和标准流_第2张图片
显示


2)不同方向上的浮动元素,左浮动会找左浮动

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


浮动和标准流_第3张图片
样式
浮动和标准流_第4张图片
显示


浮动和标准流_第5张图片
若box4也是左浮动,显示为上面的

【8】浮动元素贴靠现象

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


浮动和标准流_第6张图片
排版

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


浮动和标准流_第7张图片
样式显示


浮动和标准流_第8张图片
代码

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

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

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

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

你可能感兴趣的:(浮动和标准流)