第六十一章 浮动

上一章的方法我不喜欢,那就得有其他方法来解决这个问题,这就是浮动。浮动被用的超多的,虽然现在对于排版问题已经有了新的方式,但是浮动也并没有完全退出,尤其在你希望兼容低版本浏览器的时候。

很简单,给元素加上浮动,它就可以横排了。

准确点说,差不多就是盒元素不再默认 100% 的宽度了,也不强制独占一行了。

<div class="box-float-left">第一</div><div class="box-float-left">第二</div><div class="box-float-left">第三</div><div class="box-float-left">第四</div>
.box-float-left {float: left;border: 3px solid orange;padding: 10px;}

第一第二第三第四

多好,多完美~还可以往右浮动:

<div class="box-float-right">第一</div><div class="box-float-right">第二</div><div class="box-float-right">第三</div><div class="box-float-right">第四</div>
.box-float-right {float: right;border: 3px solid orange;padding: 10px;}

第一第二第三第四

注意顺序哦~

到现在,一切都很美好。但是真的如此么?我们来讲讲浮动。

还记得我们说文档流的时候讲的排队么?块元素就好像一个团体过来占用场地。我们又说这个块元素是个盒子。

那块元素里有块元素就如同盒子里套盒子,但是我们能看见它们里面的东西,说明什么,这些盒子没有盖。就好像……那种一个大盒子里面套了好多小盒子的收纳盒,我找不到合适的图了,还怕侵权,等哪天我自己折一个吧。

但是浮动啊,什么是浮动,就是飘起来了。

假设父元素不变,子元素全部浮动。什么情况?大盒子没动,里面的小盒子全飘出来了。好像也没什么……但是,你现在的想象是建立在大盒子有一个基本形状的基础上,如果大盒子没有被指定宽高的话,当然宽度还是默认的 100%,问题不大。但是高度……

你就想象大盒子是有弹性的,里面撑着它的东西飞了出去,结果会怎样?当然是收缩了。所以大盒子收缩了。

后面排着的元素呢?只要没飞起来的,就看不到那些浮动元素,那就傻芙芙的跟着大盒子往前跑了。

我们呢,正在以上帝视角俯视这些盒子,结果就会是……

<div class="big-box">无辜收缩的大盒子<div class="box-float-left">第一</div><div class="box-float-left">第二</div><div class="box-float-left">第三</div><div class="box-float-left">第四</div></div><div class="box-kown-nothing">后面的盒子傻芙芙跟着跑</div>
.big-box {border: 3px solid blue;padding: 10px;}.box-float-left {float: left;border: 3px solid orange;padding: 10px;}.box-kown-nothing {border: 3px solid green;padding: 10px;}

无辜收缩的大盒子第一第二第三第四后面的盒子傻芙芙跟着跑

这样一下子产生了好多问题。我们一个个说:

首先说盒子们,大家忘记了上面浮动的元素可不好。所以,我们要遵守一个原则:

如果浮动,则一直浮动,每一个元素都浮动,都飘起来不就相互看得见了。子元素飘起来了,父元素也飘起来了,所有元素都飘起来了,这和没飘起来是一样的。

但是,我们不能一整页元素全都浮动啊。如果要终止浮动,必须清除。差不多就是不用了记得收起来的意思。你看我们浮动元素,它本身的位置是正确的,对前面的元素没有影响,问题都出在后面,因为后面的人看不到天上的它们。那如果我在浮动元素的最后,立一根顶天立地的标记,不就不会发生这种误会了么?那么清除浮动就是这么一种作用。

怎么清除浮动呢?在浮动的最后再加上一个块元素,并设置它的 CSS clear: both;。就是清除这个元素的浮动,不再跟着前面飞啦,both 说的是左右都清除。(这东西怕是也就我还解释一下,简直都成了固定格式了)。一般这个元素我们也不放内容了,就是一个空元素,专门干这个。

<div class="big-box">无辜收缩的大盒子<div class="box-float-left">第一</div><div class="box-float-left">第二</div><div class="box-float-left">第三</div><div class="box-float-left">第四</div><div style="clear: both"></div></div><div class="box-kown-nothing">后面的盒子傻芙芙跟着跑</div>
.big-box {border: 3px solid blue;padding: 10px;}.box-float-left {float: left;border: 3px solid orange;padding: 10px;}.box-kown-nothing {border: 3px solid green;padding: 10px;}

无辜收缩的大盒子第一第二第三第四后面的盒子傻芙芙跟着跑

注意它的位置,是在最后一个浮动元素的后面,紧挨着。

清除浮动的方法还有很多,不过现在先学一个,用着,理解了再考虑其他的。

然后,注意大盒子里面的文字,始终坚定不移的被浮动元素影响着。这个就厉害了,大家都看不见浮动元素的时候,就它们看得见,嘿!你把它们理解为瘦高个儿就好,超级高,大概是别人的两三倍吧。你想,浮动元素飞起来一人多高,别人都看不见它了。正在空中美呢,一回头,和行内元素来个脸对脸,差点亲上,好尴尬。

最后,浮动居然可以浮动到行内元素的前面,如果我在段落里浮动图片的话……诶呀,这一章字太多了,那就作为你们的课后练习自己试验一下吧~

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第六十一章 浮动

打赏

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

支付宝扫一扫打赏

微信扫一扫打赏