CSS 传统网页布局方式之标准流和浮动，以及清除浮动的方法

传统网页布局的三种方式

• 普通流（标准流）
• 浮动
• 定位

标准流

定义：标准流（普通流/文档流）就是标签按照规定好的默认方式排列。
注意：
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;
	}
— 优点：代码简洁。
— 缺点：需要照顾低版本浏览器。

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！