你好,欢迎来到微企动力!
最新公告 | 服务社区 | 电商学院 | 建站咨询热线:0769-86069616
东莞网站建设专家 - 微企动力
css????float???????
服务网点最多的东莞网络公司
发布时间 2016-06-23  编辑:鸿远网络
??
css????float????????????????????????

    ?????????display? block??????

    ??HTML?????

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

     ??CSS?????

.outer{border1px solid #ccc;background#fc9;color#fffmargin50px auto;padding50px;}
.div1{width80px;height80px;background: red;float: left;}
.div2{width80px;height80px;background: blue;float: left;}
.div3{width80px;height80px;background: sienna;float: left;}

    ??????????DIV.outer ??????????????????????????????????????????????????????????????

    ?1???????? ?2???????? ?3??margin ?????????

    ????css???

            ?????????? ??? clear?both?

HTML?

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

CSS?

.clear{clear:both; height0line-height0font-size0}

result? ???? padding??????

    ??????div?? overflow: auto???????div??????  div.outer?

HTML?

<div class="outer over-flow"> //???????class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

CSS?

.over-flow{
    overflow: auto; zoom: 1//zoom: 1; ?????????
}

??????????  img{display: none}; ??

    ?????overflow???????????????overflow??????????hidden,auto,visible???????hiddent?auto??????????????visible???????????????????????????????????????seo???????hidden?seo????????????????????????

    ???? ??????????  :after ??????????????????

    ??????????????????????????????????:after?:before??????????????????????????????????clear:both?????????:clear?html????div.clear????outer?????clear:after????????????div.clear??????????????????

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width0;height0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

    ??clear:both;????????content: '.'; display:block;??FF/chrome/opera/IE8???????content????????????visibility:hidden;????????????????????????????????

????????????????? 

        ????????????????????????????????clear:both;????????????????????????????


    $('.float').end().????????????????????????????????????????????????????????????????????????????????????????????again??????????????????????????????????????????????????????????????????????????????


[ 点击数:] [打印本网页] [关闭本窗口
相关内容
  • ??SEO???????????? 2010-11-03
  • ???????????? 2010-11-16
  • ???????? 2010-10-22
  • ????????????? 2010-11-02
  • ???????????????????? 2010-10-16
  • ???????????????????? 2010-11-23
  • ????????????????? 2010-10-16
  • ?????FLASH???? 2010-11-23
  • SEOer?????????????????? 2010-10-17