对于浮动的一些懂得

对于浮动的一些理解

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

　　刚学了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

仅供参考。

1楼淡定的老鸟: 恐怕你的新手之说是谦虚吧(并无冒犯之意).呵呵.我也是刚刚学到CSS浮动,看到你这篇博客,突然很有亲切感,进来看看.你这里讲的3个方法,上面两个老师讲过,下面那个没看过,是w3school里的?还没来得及看.，既然讲浮动,怎么不一起讲讲他的特性呢? 望补充!!

相关推荐