为了账号安全,请及时绑定邮箱和手机立即绑定
  • .clearfix应用在包含浮动子元素的父级元素上
    查看全部
    0 采集 收起 来源:清除浮动

    2015-05-06

  • 更好的方法
    查看全部
    0 采集 收起 来源:清除浮动

    2015-05-06

  • 比较好的方法
    查看全部
    0 采集 收起 来源:清除浮动

    2015-05-06

  • BFC/haslaout声明
    查看全部
    0 采集 收起 来源:清除浮动

    2015-05-06

  • 浮动使父元素高度塌陷,不是bug而是标准!! 浮动的元素仅仅是为了实现文字环绕效果。浮动是魔鬼更是情非得已
    查看全部
  • 具有破坏性的小伙伴们
    查看全部
  • 具有包裹性的小伙伴们
    查看全部
  • float的设计初衷是:文字环绕效果。
    查看全部
    0 采集 收起 来源:float的历史

    2015-05-06

  • 修正重复文字bug 复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的: 确保所有的元素使用”display:inline;” 在最后一个元素上使用一个”margin-right:-3px;” # 为浮动元素的最后一个条目使用一个条件注释,比如: <!–[if !IE]>Put your commentary in here…<![endif]–> 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
    查看全部
    0 采集 收起 来源:Float与兼容性

    2018-03-22

  • IE6文字溢出BUG 说明:注释造成文字溢出是IE的BUG。 一个空格引发CSS失效 这 段代码对<p>的首字符样式定义在IE6上看是没有效果的(IE7没测试),而在p:first-letter和{font- size:300%}加上空格,也就是p:first-letter {font-size:300%}后,显示就正常了。但是同样的代码,在FireFox下看是正常的。按道理说,p:first- letter{font-size:300%}的写法是没错的。那么问题出在哪里呢?答案是伪类中的连字符"-"。IE有个BUG,在处理伪类时,如果伪 类的名称中带有连字符"-",伪类名称后面就得跟一个空格,不然样式的定义就无效。而在FF中,加不加空格都可以正常处理。 IE6中奇数宽高的BUG IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数。 IE6下为什么图片下方有空隙产生 解决这个BUG的方法也有很多,可以是改变html的排版,或者定义img 为display:block 或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom 还可以设置父容器的字体大小为零,font-size:0 ie6下空标签高度问题 一个空div如果高度设置为0到19px,IE6下高度默认始终19PX。 例如: .c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */} <div></div> 如果不让它默认为19PX。而是0PX的话 解决方法有3种: 1.css里面加上overflow:hidden; 2.div里面加上注释, <div><!– –></div> 3.css里面加上line-height:0;然后div里面加上#nbsp;, <div>&nbsp;</div>(#换成&)
    查看全部
    0 采集 收起 来源:Float与兼容性

    2018-03-22

  • IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug。 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了。解决方法有几种,对于网上非常流行的给右侧div增加margin-right: -3px我不是很赞同,大大增加了布局的复杂度并且如果父div有设置浮动的话就会失效,简单高效的解决办法是在父div里设置overflow:hidden。 当子元素浮动且未知高度时,怎么使父容器适应子元素的高度? 这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!--[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[if IE]>中,这样应该可以通过验证了。 超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A a:link {color: #1f3a87; text-decoration:none;} a:visited {color: #83006f;text-decoration:none;} a:hover {color: #bc2931; text-decoration:underline;} a:active {color: #bc2931;} IE6下这两个层中间怎么有间隙 这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
    查看全部
    0 采集 收起 来源:Float与兼容性

    2018-03-22

  • 智能自适应
    查看全部
  • 与显示位置匹配的单侧固定布局
    查看全部
  • 文字环绕方法
    查看全部
  • 浮动的应用
    查看全部

举报

0/150
提交
取消
课程须知
既适合学习过CSS基础知识的新手深入学习,也欢迎有经验的小伙伴加深了解噢!
老师告诉你能学到什么?
通过追溯CSS/HTML发展历史,知道Float出现的原本作用是什么,从而可以帮助我们解答很多疑惑。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!