web前端彻底理解浮动float CSS浮动详解-爱前端网

我们把网页的常用的布局格式分为以下三种:

1.标准流。

所谓的标准流就是，行内元素自己单独一行，而块级元素是上下显示的。

以前我们学习的都是标准流。

注意:标准流使我们网页布局中最稳定的一种结构

2. 浮动流

使我们学习的脱离标准流的第一种方式。会影响我们标准流的排列。所以，我们布局的时候，能用标准流做的，就不用浮动做。

3. 定位流

定位流也是脱离标准流的一种模式。它完全脱离标准流，不会对标准流有影响。

浮动(float)

我们要浮动的目的:我们浮动的目的，就是可以把多个块级元素放到想要的一行上。

浮动 Float: left right none

你不得不必须知道详细的理解浮动:

1. 浮动已经脱离的标准流。 (脱标)

也就是说，浮动已经漂浮在标准流的上方。

2. 因为我们的浮动是左右浮动，所以我们的块级元素都是左右排列。

清除浮动(clear)

如果想要我们做的网页浏览器兼容性好，首先要保证的是，我们写的代码要足够标准。

清除浮动的原因: 因为浮动会影响标准流。所以我要根据不同情况来清除浮动。

Clear:both;

1.1.1额外标签法

W3c推荐，再最后一个浮动的盒子的后面，新添加一个标签。然后他可以清除浮动。

web前端彻底理解浮动float CSS浮动详解 - 爱七七五八网 - 1

优点:通俗好理解

缺点: 增加了太多的标签

1.1.2Overflow 清除浮动

使用方法: 是浮动的大盒子(父级标签)再样式里面加: overflow:hidden;为了照顾ie6，我们再加上 zoom:1;

web前端彻底理解浮动float CSS浮动详解 - 爱七七五八网 - 2

优点:代码书写方便

缺点: 如果这个父盒子，里面还有定位，就会引起麻烦。

1.1.3 After伪类清除浮动

声明清除浮动:

.clearfix:after{

content: ;

display:block;

visibility:hidden;

clear:both;

height:0;

}

.clearfix{ /* 为了照顾ie6浏览器*/

zoom:1;

}

调用

<!DOCTYPE htmlPUBLIC -//W3C//DTD XHTML1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >

<htmlxmlns= http://www.w3.org/1999/xhtml>

<head>

<title>overflow清除浮动</title>

.clearfix:after{

content: ;

display:block;

visibility:hidden;

clear:both;

height:0;

}

.clearfix{ /* 为了照顾ie6浏览器*/

zoom:1;

}

.box{width:400px;}

.one,.two{width:200px; height:100px; background-color:#093; float:left;}

.two{background-color:#39F;}

.test{width:400px; height:120px; background-color:#900;}

</style>

</head>

<body>

</div>

</body>

</html>

优点:一次写完，后面直接调用就可以了

缺点: 声明麻烦写

1.1.4After before伪类清除浮动

声明清除

.clearfix:before,.clearfix:after{

content: ;

display:table;

}

.clearfix:after{

clear:both;

}

.clearfix{ /*照顾ie6*/

zoom:1;

}

使用:

第四种，是大部分大型网站常用的，比如新浪淘宝的清除浮动的效果。

未经允许不得转载：爱前端网 » web前端彻底理解浮动float CSS浮动详解

web前端彻底理解浮动float CSS浮动详解

作者：Yang

相关推荐

热门推荐

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏