# 网页的布局方式(标准流/浮动流/定位流)

# 网页的布局方式(标准流/浮动流/定位流)

# 浮动元素的脱标

# 浮动元素排列规则

# 贴靠现象

# 清除浮动(height/clear属性/隔墙法)

什么是网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

1.标准流(文档流/普通流)排版方式

1.1其实浏览器默认的排版方式就是标准流的排版方式

1.2在CSS中将元素分为三类,分别是块级元素/行内元素/行内块级元素

1.3在标准流中有两种排版方式,一种是垂直排版,一种是水平排版

垂直排版,块级元素间排版是垂直排布

水平排版,行内元素之间是水平排布

2.浮动流排版方式

2.1 浮动流是一种”半脱离标准流”的排版方式

2.2 浮动流是有一种排版方式,就是水平排版,它只能设置某个元素左对齐或者右对齐

注意点:

1.浮动流中没有居中对齐,也就是没有center取值

2.在浮动流中不可以使用margin: 0 auto;

特点:

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的

无论是块级元素/行内元素/行内块级元素都可以水平排版

2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

3.综上所述,浮动流中的元素和标准流中的行内元素很像

3.定位流排版方式

1.什么是浮动元素的脱标

脱标:脱离标准流

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

2.浮动元素脱标之后会有什么影响

-如果前面一个元素浮动了,而后面一个元素没有浮动,那么这个时候前面的一个元素就会盖住后面的一个元素

1.浮动元素排序规则

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

1.2 不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动

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

什么是贴靠现象

-如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示

-如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元素开始往前贴靠

-如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

什么是浮动元素字围现象?

-浮动元素虽然盖住了没有浮动的元素,但是不会盖住没有浮动元素的内容

作用:

图文混排

1.企业开发中什么时候使用标准流什么时候使用浮动流?

垂直方向使用标准流,水平方向使用浮动流

2.拿到一个很复杂的界面如何入手?

2.1从上至下布局

2.2 从外到内布局

2.3 水平方向可以先划分为一左一右再对左边或者右边进行进一步布局

注意点:

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

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

清除浮动的方式

1.清除浮动的方式一1️⃣

-给前面一个父元素设置高度

注意点:

在企业开发中我们能不写高度就不写高度

所以这种方法我们用得比较少

2.清除浮动的方式二2️⃣

给后面的盒子添加clear属性

clear属性取值:

left      在左侧不允许浮动元素

right    在右侧不允许浮动元素

both    在两边都不允许浮动元素

none   默认,两侧都允许浮动元素

inherit 继承父类的属性

注意点:

当我们给某个元素添加clear属性之后,这个元素的margin属性就会失效

margin失效原因:

3.清除浮动的方式三3️⃣

隔墙法:外墙法/内墙法

外墙法:

1.在两个盒子之间添加一个额外的块级元素添

2.给这个额外添加的盒子添加clear:both;属性

注意点:

外墙法可以让第二个盒子使用margin-top属性

外墙法不可以让第一个盒子使用margin-bottom属性

内墙法:

1在第一个盒子中所有子元素最后添加一个额外的块级元素

2给这个额外添加的块级元素添加clear: both;属性

注意点:

内墙法可以让第二个盒子使用margin-top属性

内墙法可以让第一个盒子使用margin-bottom属性

4.外墙法和内墙法区别?

外墙法不能撑起第一个盒子额高度,而内墙法可以撑起第一个盒子的高度

清除浮动的方式四4️⃣

.box1::after{

/*设置添加的子元素的内容*/

content: ””;

/*设置添加的子元素为块级元素*/

display: block;

/*设置添加的子元素的高度为0*/

height: 0;

/*设置添加的子元素看不见*/

visibility: hidden;

/*给添加的子元素设置clear: both;*/

clear: both;

}

.box1{

/*兼容IE6*/

*zoom: 1;

}

清除浮动的方式五5️⃣

添加overflow: hidden;

.box1{

overflow: hidden;

/*兼容IE6*/

*zoom: 1;

}

overflow: hidden;

1.1可以将超出标签范围的内容裁减掉

1.2清除浮动

1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后,外面的盒子不被顶下来

/*设置添加的元素看不见*/

visibility: hidden;

overflow: hidden;

1.1可以将超出标签范围的内容裁减掉

1.2清除浮动

1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后,外面的盒子不被顶下来

注意:

如果用于清除浮动,会不支持IE6

/*兼容IE6*/

*zoom: 1;