传统网页布局的三种方式
- 普通流(标准流)
- 浮动
- 定位
标准流
定义:标准流(普通流/文档流)就是标签按照规定好的默认方式排列。
注意:
1、块级元素会独占一行,从上向下顺序排列,常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table;
2、行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行,常用元素:span、a、i、em等
浮动
浮动的语法格式如下:
选择器{ float: 属性值;}
定义:float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
注意:
1、属性值具体说明见下表:
2、浮动的特点:
(1)设置了浮动的元素会脱离标准流的控制,移动到指定的位置(脱标),并且浮动的盒子不再保留原先的位置;
(2)如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。并且,浮动的元素是互相贴在一起的,它们之间是不会有缝隙的。同时,如果父级宽度装不下这些浮动的盒子,多出的盒子则会另起一行对齐。
3、浮动元素具有行内块元素的相似特性:
(1)如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动之后,它的大小是根据内容来决定的;
(2)浮动的盒子中间是没有缝隙的,而行内块元素之间是有缝隙的,这一点要特别注意;
(3)行内元素设置浮动后,可以设置宽度和高度。
4、浮动元素经常和标准流父级搭配使用:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。
5、浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
属性值 | 说明 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
清除浮动
清除浮动的方法:
1、额外标签法(隔墙法)
— 额外标签法会在浮动元素末尾添加一个空的标签。例如:<div style="clear:both"></div>,或者其他标签(如<br />等)。
— 优点:通俗易懂,书写方便。
— 缺点:添加许多无意义的标签,结构化较差。
— 注意:添加的这个新标签必须是块级元素。
2、父级添加overflow属性
— 给父级添加overflow属性,并将其属性值设置为hidden、auto或者scroll。
— 优点:代码简洁。
— 缺点:无法显示溢出的部分。
3、父级添加after伪元素
— 代码如下:
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{ /*兼容IE6和IE7*/
*zoom:1
}
— 优点:没有增加标签,结构简单。
— 缺点:需要照顾低版本浏览器。
4、父级添加双伪元素
— 代码如下:
.clearfix:before,.clearfix:after{
content:"";
display:table; /*转换为块级元素并且在一行内显示*/
}
.clearfix:after{
clear:both;
}
.clearfix{ /*兼容IE6和IE7*/
*zoom:1;
}
— 优点:代码简洁。
— 缺点:需要照顾低版本浏览器。
微信公众号也会定期更新,觉得文章写得还可以的,可以加个关注!点个赞!谢谢!