yisainan / web-interview

我是齐丶先丶森,收集整理全网面试题及面试技巧,旨在帮助前端工程师们找到一份好工作!更多详见公众号「前端面试秘籍」
MIT License
2.63k stars 505 forks source link

[兼容性] 74. float 的 div 闭合的问题 #936

Open qiilee opened 4 years ago

qiilee commented 4 years ago

问题说明:

    例如:<div id="floatA" ><div id="floatB" ><div id="NOTfloatC" >这里的 NOTfloatC 并不希望继续平移,而是希望往下排。(其中 floatA、floatB 的属性已经设置为 float:left;)
    这段代码在 IE 中毫无问题,问题出在其他浏览器中。原因是 NOTfloatC 并非 float 标签,必须将 float 标签闭合。

解决方法:

    在 <#div class="floatB"> <#div class="NOTfloatC">之间加上 <#div class="clear">这个 div 一定要注意位置,而且必须与两个具有 float 属性的 div 同级,之间不能存在嵌套关系,否则会产生异常。并且将 clear 这种样式定义为为如下即可:.clear{ clear:both;}