你的位置:首页 > 网页设计

[网页设计]我们的“浮动”时代


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

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

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



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

       在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>

 1 *{ 2   margin: 0; 3   padding: 0; 4 } 5 #wrap{ 6   float: left; 7   margin:80px 80px; 8   padding: 20px; 9   border: 3px double yellow;10   width: 500px;11   background-color: green;12 }13 14 #left{15   float: left;16   border: 3px double yellow;17   width: 200px;18   height: 300px;19   background-color: blue;20 }21 #right{22   float: right;23   border: 3px double yellow;24   width: 200px;25   height: 300px;  26   background-color: blue;27 }

      

    2. 在塌陷父元素下的浮动元素的最后加”<div ></div>“这个代码。(简单直接当增无意义标签,不利于语义化,每次都加空标签,浪费)

 1 <body> 2   <div id="wrap"> 3     <div id="left"> 4        5     </div> 6     <div id="right"> 7        8     </div> 9     <!-- <div ></div> -->10   </div>11 </body>

 1 *{ 2   margin: 0; 3   padding: 0; 4 } 5 #wrap{ 6   margin:80px 80px; 7   padding: 20px; 8   border: 3px double yellow; 9   width: 500px;10   background-color: green;11 }12 13 #left{14   float: left;15   border: 3px double yellow;16   width: 200px;17   height: 300px;18   background-color: blue;19 }20 #right{21   float: right;22   border: 3px double yellow;23   width: 200px;24   height: 300px;  25   background-color: blue;26 }

       3. 在含有浮动元素的父元素添加”overflow: hidden;“,原理就是触发了BFC。

     科普科普BFC:     BFC:块级格式上下文,是页面上的一个隔离的独立容易,容器里里面的子元素不会影响外面的元素。

     使元素触发成BFC的原因之一就是”overflow不为visible“,计算BFC高度时,浮动元素也参与计算。

     所以针对这个问题的话,当我们把父元素的div的overflow设置为hidden,父元素就触发形成BFC,所以高度会把浮动元素也参与计算。

<body>  <div id="wrap">    <div id="left">          </div>    <div id="right">          </div>      </div></body>

*{  margin: 0;  padding: 0;}#wrap{  overflow: hidden;  margin:80px 80px;  padding: 20px;  border: 3px double yellow;  width: 500px;  background-color: green;}#left{  float: left;  border: 3px double yellow;  width: 200px;  height: 300px;  background-color: blue;}#right{  float: right;  border: 3px double yellow;  width: 200px;  height: 300px;    background-color: blue;}

     4. after伪元素:子元素后面,可以设置一个具有clear的元素,在将其隐藏。(推荐使用,屡试不爽哦)

 1 <body> 2   <div id="wrap"> 3     <div id="left"> 4        5     </div> 6     <div id="right"> 7        8     </div> 9     10   </div>11 </body>

*{  margin: 0;  padding: 0;}#wrap{  margin:80px 80px;  padding: 20px;  border: 3px double yellow;  width: 500px;  background-color: green;}#left{  float: left;  border: 3px double yellow;  width: 200px;  height: 300px;  background-color: blue;}#right{  float: right;  border: 3px double yellow;  width: 200px;  height: 300px;    background-color: blue;}#wrap:after{  content: "";  clear: both;  visibility: hidden;  display: block;}

     5.浮动元素的结尾处加br标签

   

<body>  <div id="wrap">    <div id="left">          </div>    <div id="right">          </div>    <br class="clearfloat"/>  </div></body>

*{  margin: 0;  padding: 0;}#wrap{  margin:80px 80px;  padding: 20px;  border: 3px double yellow;  width: 500px;  background-color: green;}#left{  float: left;  border: 3px double yellow;  width: 200px;  height: 300px;  background-color: blue;}#right{  float: right;  border: 3px double yellow;  width: 200px;  height: 300px;    background-color: blue;}.clearfloat{  clear: both;}

     

      6. 父div定义display: table; (会产生新的问题)

<body>  <div id="wrap">    <div id="left">          </div>    <div id="right">          </div>      </div></body>

*{  margin: 0;  padding: 0;}#wrap{  display: table;  margin:80px 80px;  padding: 20px;  border: 3px double yellow;  width: 500px;  background-color: green;}#left{  float: left;  border: 3px double yellow;  width: 200px;  height: 300px;  background-color: blue;}#right{  float: right;  border: 3px double yellow;  width: 200px;  height: 300px;    background-color: blue;}

    7.父级div定义overflow: auto;(必须定义width或者zoom:1,不能定义height)

    

<body>  <div id="wrap">    <div id="left">          </div>    <div id="right">          </div>      </div></body>

*{  margin: 0;  padding: 0;}#wrap{  overflow: auto;  margin:80px 80px;  padding: 20px;  border: 3px double yellow;  width: 500px;  background-color: green;}#left{  float: left;  border: 3px double yellow;  width: 200px;  height: 300px;  background-color: blue;}#right{  float: right;  border: 3px double yellow;  width: 200px;  height: 300px;    background-color: blue;}

   8.定义height咯

<body>  <div id="wrap">    <div id="left">          </div>    <div id="right">          </div>      </div></body>

*{  margin: 0;  padding: 0;}#wrap{  height: 352px;  margin:80px 80px;  padding: 20px;  border: 3px double yellow;  width: 500px;  background-color: green;}#left{  float: left;  border: 3px double yellow;  width: 200px;  height: 300px;  background-color: blue;}#right{  float: right;  border: 3px double yellow;  width: 200px;  height: 300px;    background-color: blue;}



   八种方法都介绍完咯,第一次写博客,有点手抖,请原谅啦,哈哈哈。

 

                                                                                                                                                                                                                              2015-12-03     20:22:53