刚前端入门的童鞋肯定对”浮动“这个“小魔怪”又爱又恨,我也是如此,我是刚入门,可是每天都被浮动搞得头昏脑涨的。入正题啦~~~~~~~~~我来总结一下浮动的产生和解决办法吧,如有错,请大神们多多指点,妹 ...
刚前端入门的童鞋肯定对”浮动“这个“小魔怪”又爱又恨,我也是如此,我是刚入门,可是每天都被浮动搞得头昏脑涨的。
入正题啦~~~~~~~~~
我来总结一下浮动的产生和解决办法吧,如有错,请大神们多多指点,妹妹不甚感激。
在css规范中,浮动定位不属于正常的文档流(正常的文档流就是html文件里面的那些标签元素,例如<div>,<p>等标签元素),浮动是独立定位的,会从正常文档中脱离。
就好像一个只含有浮动元素的父容器,在显示的时候不考虑子元素,就当他们不存在一样,就造成父容器不存在一样,就是传说中的”高度塌陷“!!!!我们希望的效果都是左图,然而世界就是一个比爱的过程,得到的却是如右图,哈哈哈,你赢了!!!然后我们就要总结一下解决这种问题的方法,就是传说中的”清除浮动“了。
- 清除浮动的八大方法(以下方法的效果图都是上面左图,欢迎补充方法)
1. 浮动元素具有延伸性
可以理解为当父元素被设置为浮动元素后,该父元素就有延伸性,进而包含它里面含有的所有浮动元素。(不推荐,父元素为浮动元素,会影响它后面的布局)
1 <body> 2 <div id="wrap"> 3 <div id="left"> 4 5 </div> 6 <div id="right"> 7 8 </div> 9 </div>10 </body>
原标题:我们的“浮动”时代
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。