美文网首页
关于Clear的总结

关于Clear的总结

作者: O泪O | 来源:发表于2016-03-07 19:02 被阅读36次

引发问题的需求:

      实现三列布局,左右宽度各20%,中间宽度自适应,三列高度均可由元素撑开,当左侧高度>中间高度时,让中间的高度等于左侧的高度,但当中间的高度由于元素撑开导致高于左侧是,左侧高度并不被影响。(只能用CSS实现)

解决过程中遇到的问题:

      不知道如何实现高度的自适应变化。?(在网上找到了一种padding正,magin负的方法,个人觉得这是一个掩耳盗铃的方法。)由于一些巧合,发现用clear竟然可以解决这个问题。

深入研究后的总结:

      原来只是知道clear可以清除浮动,只知道用法,却不知道具体的原理是什么,经过查找资料和一番测试才明白,W3School上的解释是这样的“clear 属性规定元素的哪一侧不允许其他浮动元素。”,原来当你使用clear:left时,他会找到所有左浮动的元素,让这个加有clear属性的元素的上边框?刚好挨着上述左浮动元素的下外边距的边界,直到该元素的左侧不再有左浮动的元素为止。利用clear的这个原理我们就可以解决上述的问题了。

相关文章

  • 关于Clear的总结

    引发问题的需求: 实现三列布局,左右宽度各20%,中间宽度自适应,三列高度均可由元素撑开,当左侧高度>中间高度时,...

  • 关于清除浮动的理解clear:both,clear:left,c

    1. clear 图像的左侧和右侧均不允许出现浮动元素clear 属性规定元素的哪一侧不允许其他浮动元素。clea...

  • 清空输出

    dm ' log; clear; odsresult;clear; output; clear; ';

  • 关于Clear:both,left,right

    清除浮动是一个很常见的东西。得了解下,不能就记个形式,这样对自己不负责呀。问题的描述,前端写代码稍不留神,就会这个...

  • Python中关于字典的一些API

    Python中关于字典的一些API clear() pop(key) popitem() update(dict2...

  • clear

    clear 属性规定元素的哪一侧不允许其他浮动元素 元素盒子的边不能和前面的浮动元素相邻 clear: none ...

  • clear

    12月20日是我的生日。现在开始到生日那天还有43天。也就是六周的时间。我要利用这六周做好清理工作。清理几十年的混...

  • Clear

    “我把我的整个灵魂都给了某个人,而这个人似乎只把它当成一朵花,插在外套纽扣孔里,成了装点他虚荣心的一个小饰品。” ...

  • Clear

    一种关系注定了就只能是这样的相处,模糊化处理对彼此都不是好事。泾渭分明看似冷漠却是长久关系的根基,专注于自己的事情。

  • georgiaGu的scalerstalk第四轮新概念朗读持续力

    材料:lesson45 a clear conscience 内容:l0+l4 总结:开始持续朗读训练已经两周多了...

网友评论

      本文标题:关于Clear的总结

      本文链接:https://www.haomeiwen.com/subject/pytzkttx.html