一、脱离标准文档流

就是文档的“默认”状态，就是标签占用文档的位置。

标准文档流中，标签分为两种：块级元素、行内元素。

块级元素：

一定是霸占一行的，能设置宽、高，不设置宽度默认就是占满父亲。div、p、h、li

行内元素：

和其他行内元素并排，不能设置宽、高，默认宽度就是文字宽度。span、a、b、i、u

标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。

1、浮动

行级元素转换成块级元素

一旦一个元素浮动了，就可以设置宽高，无论是行标签，还是块标签 。

因为浮动之后，脱离标准流了，所以标准流里面的法律、规则都不适用了。

(1)浮动宏观的看，就是做“并排”的,所有的元素都可以浮动

(2)具有float属性的元素在父标签中是不占空间的

(3)float能解决标签之间有间隙的问题

(4)浮动是css里面布局用的最多的属性。

(5)浮动的元素有“字围”效果

2、清除浮动

clear：none | left | right | both

none：允许浮动元素出现在两侧

left：  左侧不允许有浮动元素

right： 右侧不允许有浮动元素

both： 不允许有浮动

<div class=“clear”></div>

.clear{clear:both;}

兼容性：

下面这种清除浮动的方法在ie6下，div空标签会有默认高度。

解决方法：

.clear{

clear:both;

//IE   

overflow:hidden;

height:0;

}

远近互联前端小华整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。