您的位置：首页 > 编程技术 > html  >  详解html中清除浮动的几种方法

详解html中清除浮动的几种方法

 更新时间：2017年1月22日 11:06  点击：1787
这篇文章介绍了html清除浮动的几种方法，有需要的朋友赶快来看看吧

html

<div>
    <divclass='box-left'></div>
    <divclass='box-right'></div>
</div>

css

.box-left,.box-right{
        width:200px;
        height:200px;
        float:left;
        background:red;
        border:1pxsolid#333;
    }

第一种方法：.box{clear:box}

第二种方法：.box{overflow:hidden}

第三种方法：.box{overflow:auto}

第四种方法：.box:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}.box{ zoom:1;}

第五种方法：.box{height:200px}设置高度

第六种方法：.box{display:table}

还有什么方法欢迎补充，加油，共同进步

小编推荐的这篇文章介绍了常见CSS与HTML使用误区的详解，有需要的同学可以研究一下

误区一.多div症

<divclass="nav">
    <ul>
       <li><ahref="/home/">Home</a></li>
       <li><ahref="/about/">About</a></li>
       <li><ahref="/concact/">Concact</a></li>
    </ul>
</div>

上述使用使用多余的div标签现状，就称为“多div症”，理应简化成下

<ulclass="nav">
      <li><ahref="/home/">Home</a></li>
      <li><ahref="/about/">About</a></li>
      <li><ahref="/concact/">Concact</a></li>
</ul>

误区二.多类class症  注意点class可以应用于页面任意多个元素，非常适合标识内容类型或其他相似的条目

一段新闻（新闻标题、新闻详情内容）

<h1class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<pclass="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

上述类名使用news-head与news-text 就称为"多类症"表现，不需要这么多的类区分元素样式

最好使用div（division）代表部分而不是没有语义（大多数人误解div无语义！！！），实际上div可以将文档划分为几个有意义的区域.

类名news从而识别整个新闻条目。然后可以使用层叠（cascade）样式识别新闻标题、文本，理应修改如下

<divclass="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

span 对行内元素进行分组或标识

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <spanclass="date">Februray 22nd, 2009</span>
    By <spanclass="author">Harry Knowles</span>
</p>

误区三.id使用误区 用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）

/*大量的使用id,很难找到唯一名称混乱*/
#andy, #rich, #jeremy, #james-box, #sophie {
    font-size:1em;
    font-weight:bold;
    border:1pxsolid#ccc;
}
/*只需一个普通类替代它*/
.staff {
    font-size:1em;
    font-weight:bold;
    border:1pxsolid#ccc;
}

用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）

小编推荐的这篇文章介绍了两种文本超出部分隐藏的方法，有兴趣的同学快来看看吧

文本超出部分隐藏，总结两种方法。

1、单行隐藏

html代码

<divclass="mi">当文字超过范围的时候，超出部分会隐藏起来。</div>

css代码

.mi {
    width:200px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}

2、多行隐藏

html代码

<divclass="mi">当文字超过范围的时候，超出部分会隐藏起来。可以设置第几行开始隐藏。</div>

css代码

.mi {
    width:200px;
    overflow:hidden;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
这篇文章介绍了微信开发之php表单微信中自动提交两次问题解决办法，有兴趣的同学可以研究一下

前言：

最近做微信开发，在微信中访问PHP页面，页面中有个表单。测试发现偶尔会出现表单被自动提交两次的情况，导致流程出错。

问题原因

暂时未找到原因，不过怀疑跟微信本身的机制有关。

解决方法

用session，每次提交表单时，计算一个随机数post出去。页面处理表单提交时，先判断是否有这个session，如果不存在就保存，存在就和post过来的随机数比较，如果相等表示重复提交。

代码示例:

表单部分

 
 代码如下 复制代码
<divclass="odform">
  <form action="#"method="post">
 
    <divclass="input-group">
      <labelfor="amount_id">金额</label>
      <input type="text"name="amount"id="amount_id"
          placeholder="单位是元，精确到分,如:12.66"pattern="^([1-9]+(\.[0-9]{2})?|0\.[1-9][0-9]|0\.0[1-9])$">
      <input type="hidden"name="code"value="<?php $code = mt_rand(0, 100000); echo $code; ?>">
    </div>
 
    <divclass="input-group">
      <span id="available">当前余额:<?phpecho$amount_available; ?>元</span>
    </div>
 
    <button name="confirm">确认</button>
  </form>
</div>
 

处理表单提交

 
 代码如下 复制代码
if(isset($_POST['confirm'])) {
  //解决重复调用两次的问题
  if($_POST['code'] ==$_SESSION['code'])
  {
    exit;
  }
  else
  {
    $_SESSION['code'] =$_POST['code'];
  }
 
  //continue....
}
 
[!--infotagslink--]

相关文章

  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25

  • @CacheEvict 清除多个key的实现方式

    这篇文章主要介绍了@CacheEvict 清除多个key的实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-13

  • HTTP 408错误是什么 HTTP 408错误解决方法

    相信很多站长都遇到过这样一个问题，访问页面时出现408错误，下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因： HTT...2017-01-22

  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30

  • Android子控件超出父控件的范围显示出来方法

    下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法，希望这篇文章能够帮助到各位朋友，有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02

  • ps把文字背景变透明的操作方法

    ps软件是现在非常受大家喜欢的一款软件，有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法，喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • intellij idea快速查看当前类中的所有方法(推荐)

    这篇文章主要介绍了intellij idea快速查看当前类中的所有方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-02

  • Mysql select语句设置默认值的方法

    1.在没有设置默认值的情况下： 复制代码 代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果：...2014-05-31

  • js导出table数据到excel即导出为EXCEL文档的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2013-10-13

  • mysql 批量更新与批量更新多条记录的不同值实现方法

    批量更新mysql更新语句很简单，更新一条数据的某个字段，一般这样写：复制代码 代码如下:UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_value';如果更新同一字段为同一个值，mysql也很简单，修改下where即...2013-10-04

  • js基础知识（公有方法、私有方法、特权方法）

    本文涉及的主题虽然很基础，在许多人看来属于小伎俩，但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。公有方法 公有方法就是能被外部访问...2015-11-08

  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06

  • IDEA中的clean,清除项目缓存图文教程

    这篇文章主要介绍了IDEA中的clean,清除项目缓存图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25

  • PHP 验证码不显示只有一个小红叉的解决方法

    最近想自学PHP ，做了个验证码，但不知道怎么搞的，总出现一个如下图的小红叉，但验证码就是显示不出来，原因如下 未修改之前，出现如下错误； （1）修改步骤如下，原因如下，原因是apache权限没开， （2）点击打开php.int.， 搜索extension=ph...2013-10-04

  • c#中分割字符串的几种方法

    单个字符分割 string s="abcdeabcdeabcde"; string[] sArray=s.Split('c'); foreach(string i in sArray) Console.WriteLine(i.ToString()); 输出下面的结果: ab de...2020-06-25

  • 安卓手机wifi打不开修复教程，安卓手机wifi打不开解决方法

    手机wifi打不开？让小编来告诉你如何解决。还不知道的朋友快来看看。 手机wifi是现在生活中最常用的手机功能，但是遇到手机wifi打不开的情况该怎么办呢?如果手机wifi...2016-12-21

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 方法一： 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13

  • 连接MySql速度慢的解决方法(skip-name-resolve)

    最近在Linux服务器上安装MySql5后，本地使用客户端连MySql速度超慢，本地程序连接也超慢。 解决方法：在配置文件my.cnf的[mysqld]下加入skip-name-resolve。原因是默认安装的MySql开启了DNS的反向解析。如果禁用的话就不能...2015-10-21

  • C#方法的总结详解

    本篇文章是对C#方法进行了详细的总结与介绍，需要的朋友参考下...2020-06-25