首页>前端教程>CSS教程

CSS第十二课:float(浮动)

很多人一提到布局,首先想到的是DIV+CSS,然后DIV+CSS布局的核心就是浮动,其实呢,我想说的是,浮动刚开始并不是拿来布局的,只是table布局out之后,浮动刚好可以实现这种效果,就拿来用了,效果还不错,但是浮动带来的破坏性也是非常大的。

今天这篇文章就认真的谈一下浮动。

一、浮动的W3C官方解释

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

W3C的官方文档:CSS 浮动,一定要看!

可以认为浮动的出现就是为了实现文字环绕图片吗?如图所示:

问题是,W3C明确的指出浮动之后的元素脱离了文档流,其它元素在排列的时候把浮动元素当成空气,那么我就该认为浮动元素应该压住其它没有浮动的元素,但是为何文字就不会被压住,反而是环绕呢?

如图,两个div,left的div浮动了,right的div没有浮动,right被left压住了,但是right里面的文字没有被压住,而是浮在了left这个div的右边。

<div class="main">
	<div class="left">left</div>
    <div class="right">right</div>
</div>
.main{
	width:500px;
	border:1px solid #000;}
.left{
	width:200px;
	height:200px;
	background-color:#F90;
	float:left;}
.right{
	width:250px;
	height:250px;
	background-color:#1EB7C4;}

如图所示:

css之浮动.png

所以,这个到底该如何解释呢?

浮动了的div到底脱离了文档流没有?为什么对于block的块状对象是压着,对于文字内容就不会压着?

如果是图片性质的内容呢?

<div class="main">
    <div class="left">left</div>
    <img src="images/smallpics/1967.jpg">
    <div class="right">right</div>
</div>

加了一张图片,图片也没有浮动。效果如图:

css之浮动1.png

那把图片放在right这个div里面呢。

<div class="main">
    <div class="left">left</div>
    <div class="right">right<img src="images/smallpics/1967.jpg"></div>
</div>

浮动带来的影响.png

图片依然没有被压着。

所以,纯粹的把float浮动元素解释成脱离了文档流,等同于绝对定位一样的对象说不通。它不会压住inline类的对象。

二、张鑫旭的观点

我认真的看了这两篇文章,对于浮动是否脱离文档流,以及浮动的本质有很好的解释,可以看看。

CSS float浮动的深入研究、详解及拓展(一)

CSS float浮动的深入研究、详解及拓展(二)

这两篇文档的观点是认为浮动并不是真正脱离了文档流,而只是没有了高度而已。

三、大众的观点

知乎上有一个回答能代表大部分人的观点,我也比较赞同。

CSS中的浮动真的是脱离了文档流吗?

有3D视图的解答很有感,最后是这样总结的:

脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute position(绝对定位)脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。 

作者:张秋怡 链接:https://www.zhihu.com/question/24529373/answer/29135021 来源:知乎 著作权归作者所有。

四、我的观点

1、我认为浮动的确是上升了层级的,如果把网页看成一个三维坐标,那么z轴就可以看成网页的层级。假设浮动对象从原始层级1上升到上一个层级2,则曾经的占位消失,1层级的后面的内容会上来占据浮动对象曾经的位置,导致从上往下看,浮动对象压住了后面的对象。

浮动示意图,这里的浮动默认是左浮动:

浮动示意图.gif

2、容器2浮动后,容器3占据容器2曾经的位置,容器1的高度自动变成容器3的高度。

3、容器3浮动后,如果容器1的可用宽度够容器2和容器3并排,则容器3会贴在容器2的右边。容器1没有高度了。这就是浮动带来的破坏。

4、这时候,在浮动的2、3后面,容器1的里面,添加一个空的容器,设置clear:both,清除浮动带来的影响,也就是该容器不会移动上去占据容器2、3曾经的位置,还是处于2、3的后面。这时候,容器1认为里面有内容,有高度,也就跟着高度自适应了。

这就是我对浮动的理解,浮动很具有破坏性,主要体现在对后面的元素和父元素的影响上。但是,浮动容器可以压住block类的容器,但是对于容器里面的文字和图片等inline类型的内容不会压住。

五、如何解决浮动带来的破坏性?

1、浮动影响后面的元素,让后面的元素移动上来占据自己曾经的位置。这种情况,只需要为后面的元素设置清除浮动即可。

.cb{
	clear:both;}
<div class="main">
    <div class="left">left</div>
    <div class="right cb">right</div>
</div>

效果如图:

clear清除浮动的影响.png

2、浮动让父元素高度不自适应,有两种办法可以解决,一种是简单粗暴的作法,在浮动元素的最后面,父元素的里面,添加一个空的div,为这个空div设置清除浮动。

.main{
	width:500px;
	border:1px solid #000;}
.left,.right{
	width:200px;
	height:200px;
	background-color:#F90;
	float:left;}
.right{
	background-color:#1EB7C4;
	}
.cb{
	clear:both;}
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="cb"></div><!--添加一个清除浮动的空div-->
</div>

效果如图:

浮动后让父容器高度自适应.png

这种方法增加了一个新的空标签,对于结构来说不够友好,所以可以使用:after伪元素来解决。对于高版本的浏览器来说很友好。

如果不考虑兼容IE6等低版本浏览器,其实只需要这几行代码就可以了。

.clearfix:after{
	content:"";
	display:block;
	clear:both;}
<div class="main clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

:after表示的是在使用了该样式的元素的里面的最后面添加内容。

所以,是高度不自适应的父元素使用clearfix这个样式。那么就在main这个元素的里面的最后面,也就是在left、right浮动div的后面添加一个清除浮动的block元素。这是粗暴方法的优雅版本。

浮动不是最好的布局方式,所以在CSS3里面增加了多栏布局和盒布局,还有弹性盒布局等,相信不久新的布局方式会兴起。

点赞


10
保存到:

相关文章

Top