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结束前,如果放在结束后,则无效。

  • 相关阅读:
    两数相加(B站看视频总结)
    正则表达式基础1
    C语言程序的错误和警告
    C语言运算符优先级和结合性一览表
    逻辑运算符及其优先级,C语言逻辑运算符及其优先级详解
    C 语言实例
    电脑不显示桌面怎么办?
    135编辑器安卓客户端
    C语言实例-大小写字母间的转换
    C 语言实例
  • 原文地址:https://www.cnblogs.com/darkterror/p/5358033.html
Copyright © 2011-2022 走看看