zoukankan      html  css  js  c++  java
  • clear both

    原文地址:http://www.codefans.net/articles/653.shtml

    因CSS很多布局是需要浮动的,当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,为了使float后面的元素不被float浮动层的影响,我们就需要用clear:both;来清除。比如下面的例子:

    1 <p style="float:left;200px;">第1列,</p>
    2 <p style="float:left;400px;">第2列,</p>
    3 <p style="clear:both;">第3列。</p>

    如果没有清除浮动,那么第3列文字就会和第1、2列文字连在一起 ,所以需要在第3个列上加入清除浮动的代码。

    一般情况下,我们会为清除浮动专门定义一个CSS类,用时候直接引用,这样更方便,比如:

    01 <style>
    02 .clear {clear: both;}
    03 </style>
    04 <!--以下为调用方法-->
    05 <div class="clear"></div>
    06  
    07 <!--比如上面的例子可以写成:-->
    08 <p style="float:left;200px;">第1列,</p>
    09 <p style="float:left;400px;">第2列,</p>
    10 <div class="clear"></div>
    11 <p>第3列。</p>

    因为IE和火狐存在兼容性问题,所以有时候这样定义清除浮动会在不同浏览下效果会不同,IE也说的过去,在火狐下或许就不灵了,下面给出一个经过调试的CSS清除浮动代码,供参考:

    1 .clear {
    2 clear: both;
    3 height:1px;
    4 margin-top:-1px;
    5 overflow:hidden;
    6 }

    清除浮动一般是在外层Div结束前,如果放在结束后,则无效。

  • 相关阅读:
    复制带中文的公式贴到通达信公式中显示乱码解决方案
    命令指定线程个数
    随机姓名
    将二维list某列组成新的list
    jenkins配置小结
    jmeter5.0 while controller使用总结
    centos7 桌面化配置
    django study1 数据库
    centos7 安装firefox
    python之self
  • 原文地址:https://www.cnblogs.com/darkterror/p/5358033.html
Copyright © 2011-2022 走看看