zoukankan      html  css  js  c++  java
  • clear:both其实是有瑕疵的

    在开发中,从美工MM给你Html代码中,肯定能经常看"<div style="clear:both;"></div>"这样的代码,但是你真的能明白它是做什么用的吗?

    如:

    1 <div style="border:2px solid red;">
    2     <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    3     <div style="clear:both;"></div>
    4 </div>

    你可以将此部分代码放到一个HTML页面看看效果,然后在去掉"<div style="clear:both;"></div>"看一下效果,就知道这句话的作用了。

    原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。

    但这种办法就是最好了的吗?

    我这么说,当然答案就不是了。可以采用通过Hack实现:

    01 <style>
    02 .clearfix:after{
    03     visibility: hidden;
    04     display: block;
    05     font-size: 0;
    06     content: ".";
    07     clear: both;
    08     height: 0;
    09 }
    10  
    11 * html .clearfix{zoom: 1;}
    12   
    13 *:first-child + html .clearfix{zoom: 1;}
    14 </style>
    15 <div class="clearfix" style="border: 2px solid red;">
    16     <div style="float: left; 80px; height: 80px; border: 1px solid blue;">
    17         TEST DIV</div>
    18 </div>

    看完解决办法,咱们来看里边的原理:

    首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。

    :after伪类IE不支持,它用来和content属性一起使用设置在对象后的内容,例如:

    1 a:after{content:"(link)";}

    这个CSS将会让a标签内的文本后边加上link文本文字。

    利用"* html"这个只有IE6认识的选择符,设置缩放属性"zoom: 1;"实现兼容IE6。

    利用"*:first-child + html"这个只有IE7认识的选择符,设置缩放属性"zoom: 1;"实现兼容IE7。

  • 相关阅读:
    关于JSON可能出现的错误,待更/todo
    mongoose的安装与使用(书签记录) 2017
    HTTP的学习记录3--HTTPS和HTTP
    HTTP的学习记录(二)头部
    HTTP(一)概述
    LeetCode 455. Assign Cookies
    LeetCode 453. Minimum Moves to Equal Array Elements
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 447. Number of Boomerangs
    LeetCode 416. Partition Equal Subset Sum
  • 原文地址:https://www.cnblogs.com/xiaoyang002/p/4064196.html
Copyright © 2011-2022 走看看