你的位置:首页 > 软件开发 > 网页设计 > 我们的“浮动”时代

我们的“浮动”时代

发布时间:2015-12-03 21:00:30
刚前端入门的童鞋肯定对”浮动“这个“小魔怪”又爱又恨,我也是如此,我是刚入门,可是每天都被浮动搞得头昏脑涨的。入正题啦~~~~~~~~~我来总结一下浮动的产生和解决办法吧,如有错,请大神们多多指点,妹 ...

前端入门的童鞋肯定对”浮动“这个“小魔怪”又爱又恨,我也是如此,我是刚入门,可是每天都被浮动搞得头昏脑涨的。

入正题啦~~~~~~~~~

我来总结一下浮动的产生和解决办法吧,如有错,请大神们多多指点,妹妹不甚感激。



  • 先讲一下浮动产生的原因 

       在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 (#换成@)。

可能感兴趣文章

我的浏览记录