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

[网页设计]对于浮动的一些理解


  第一次写博客,不知道写点什么,以前也没写过,所以写得不好请见谅。

  刚学了CSS浮动,所谓浮动,就是使文字和图像产生一些环绕效果,它的意思就是使用了浮动float属性之后,将浮动的元素从正常文档流中脱离,正常的文档流中,div是块级元素,独占一行,如果不使用浮动让div并排的话,只能使用定位position(暂且不说)。

  要想使div元素并排显示,就要用到浮动属性,由于div是块级元素独占一行,所以如果不使用浮动正常情况下是按照常规流的排列顺序进行排列,如下图所示:

  如果要想div1、div2、div3并排显示,就要使用浮动,但是使用float将div1浮动起来之后如下图

就成这样子了,为什么呢,因为div1浮动起来之后,脱离了常规流的排列布局方式,所以div2就默认前面没有元素,就会上移,占据div1的位置,由于div1是浮动的,所以只能看到div2一小部分,其余部分被浮动起来的div1覆盖了。

  要使3个div并排显示,只需要将他们都浮动起来就可以了,但是,使用浮动后,会对后面的布局元素造成一些影响,这里主要是想介绍几种清除浮动影响的方法。

  方法一:使用clear属性。

<head>    .clear{     clear:both;}</head><body>    <div class=“clear”></div></body>

意思就是紧跟浮动元素后面加上一个空的div。

  方法二:给父级元素加overflow属性。

 <!DOCTYPE html><html>  <head lang="en">  <meta charset="UTF-8">  <title></title>  <style>  #warp {      width: 300px;      height:300px;      border:1px solid red;      overflow: hidden;        }   .inner1{      width:100px;      height:100px;      background-color:blue;      float:right;        }    .inner2{      width:100px;      height:100px;      background-color:yellow;        }  </style></head><body><div id="warp">  <div class="inner1">1</div>  <div class="inner2">2</div></div></body>         

  通过给父元素加overflow属性,就能达到清除浮动的影响。

  方法三:通过伪对象after、before。

    .clearFix:after{      clear:both;      display:block;      visibility:hidden;      height:0;      line-height:0;      content:".";      }<div class="clearFix"></div>

这种方法是网上常用的方法。

 

 

  以上就是本人所了解到关于清除float影响的方法,如有归纳不全,毕竟新手初学,还望谅解。

这是w3school关于浮动的一个说明:http://www.w3school.com.cn/css/css_positioning_floating.asp

仅供参考。