zoukankan      html  css  js  c++  java
  • 【原创】html页面清除浮动的几种方法

    首先,来个demo,代码如下:

    html:

    1 <div class="cont">
    2     <div class="cont1"></div>
    3     <div class="cont2"></div>
    4     <div class="cont3">你好,我是Mrxia</div>
    5 </div>
    View Code

    css:

     1 .clearfix:after {
     2     visibility: hidden;
     3     display: block;
     4     font-size: 0;
     5     content: " ";
     6     clear: both;
     7     height: 0;
     8 }
     9 .clear{
    10     clear:both;        
    11 }
    12 .cont{
    13          border:1px solid #ddfe00;width:800px;
    14 }
    15 .cont1{
    16     width:200px;height:100px;background:#ffce80;float:left;
    17 }
    18 .cont2{
    19     width:200px;height:100px;background:#ccc;float:right;
    20 }
    View Code

     效果图如下所示:

    由于浮动的原因,父级元素cont不能被撑开,div.cont3与div.con1、div.cont2保持在了同一行。

    清除浮动,常用方式有以下几种:

    1.设置父元素的高度(局限性)

    1 .cont{
    2      height:102px;                   
    3 }

     2.使用css的clear属性

    1 <div class="cont">
    2     <div class="cont1"></div>
    3     <div class="cont2"></div>
    4     <div class="clear">你好,我是Mrxia</div>
    5 </div>

     3.设置父元素overflow属性(hidden/auto)

    .cont{
         overflow:auto;
    }

     4.使用clearfix(原理还是css的clear属性)

    1 <div class="cont clearfix">
    2     <div class="cont1"></div>
    3     <div class="cont2"></div>
    4     <div>你好,我是Mrxia</div>
    5 </div>

    clearfix说明:目的是创建一个隐形的内容为空的块来为目标元素清除浮动。

    清除浮动后效果,如下图所示:

    以上方法经笔者亲测可用,也是一点总结,欢迎大家多提看法、评论。

    本文为原创,转载请注明出处!

  • 相关阅读:
    浅谈 cosos2d-x 的ImageView和Sprite的区别
    浅谈JS数据遍历的几种方式
    浅谈Cocos2d-js cc.director
    JavaScript的Let用法
    JS开发工具WebStorm使用快捷键
    python 文件操作
    浅谈代码自动构建工具
    rhel6.4 zabbix 安装时少的bcmath mbstring
    Security:090476]Invalid/unknown SSL header was received from peer locahost during SSL handshake
    jconsole
  • 原文地址:https://www.cnblogs.com/mrxia/p/3573780.html
Copyright © 2011-2022 走看看