在CSS中,我最怕的就是浮动和定位。我是因为浮动和定位而怕CSS。但是怕,也得攻下来。
这篇文章再次复习一下浮动和定位。
浮动
《CSS权威指南》里这么描述浮动,
“首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...一个元素浮动时,其他内容会环绕该元素。”
浮动的作用是把一个元素浮动到某个位置,会脱离文档流,就像一个人漂浮在空中那样。
然而,它是有副作用的,一旦元素使用了浮动,会影响该元素附近的元素,就像这个人被披上了浮动后,周围的人都会围绕他,而他还漂了起来。所以需要清除浮动。实际应用中,元素经常莫名其妙地错乱,就是这个属性搞的鬼,我以前也花了很长时间来理解这个属性。比理解函数难多了,花的时间也很多。
然而,实际使用还是会出现各种问题,所以我是能不用浮动,尽量不用浮动。尽量用margin来控制元素的布局,否则到后面维护起来,改一个元素,其它元素到处跑,脑袋马上就宕机了。
定位
主要讨论relative和absolute
relative:元素偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
就像一辆车飞起来了,后面的车不能前进,因为它的幻影还在原来的位置。
absolute:元素框从文档流完全删除,并相对于其包含块。
absolute一般会和relative配合使用。使用前是需要理清楚元素之间的关系。一个元素设置了absolute,它是相对于父元素偏移,这个父元素需要设置relative,否则就相对于body。
通俗地说就是,儿子能听爸爸的,但是这个爸爸需要relative加身,否则就听爷爷的,这个爷爷就是body。