样式需要的浮动

原创 zhang_cheng 随笔 随笔 220阅读 2017-05-01 17:21:39 举报

浮动: float:
浮动是一个属性,是我们在css样式布局中不可缺少的东西,比如我们使用的导航栏,我们的元素横向排版几乎都离不开浮动。
他有三个值, left;right; none ; 我们默认的值是none ,就是不浮浮动;
何为浮动?
从字面上来理解,就是让元素在父元素里面漂浮,专业的讲一下就是,脱离文档流的概念,就像是箱子一样,本来是落地的,然后我们人为的把他用绳子吊了起来。漂浮在空中,而原本的空间,也会被剩余不浮动的箱子顶替。 从而生成了浮动之后与不浮动的元素重叠的效果,如果不想发生重叠,可以在后面的元素,一一加上浮动即可。
想一下,如果我们设置浮动了,让所有的元素都飘了起来,父级的空间也会发生变化吗? 答案是肯定的,父级没有设置宽高的话,让父级里面的子元素浮动,父级的高度是零。这就是我们经常遇见的高度塌陷的问题。
解决这个问题的办法是清除浮动: 比较常用的方法是,伪类的方法。 clearfix:after{display:block;content:"";clear:both;} 这样就不会发生父级不扩高的问题、
浮动很简单,自己试一下就会明白,在这里就不多讲了。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复