江苏龙网

  1. 首页 > 生活 > >

使用.clearfix:after清除浮动，我的代码为啥没有作用有代码案例

我觉得还是滥用clear:both;其实clear:both的原理是给元素添加margin-top，撑起父容器的高度，浮动元素已经脱离父容器的控制，而是应该把使用clear：both的div放到浮动元素的后面，才会根据浮动元素的各自高度来计算出margin-top的值
■网友
如果你的DIV3不是动态生成的（意思就是没办法在上面附加class或style那么就直接在div3上加一个 clear:both 就好clear清除浮动是相对于同层级的元素而言的div2 的:after是div2的子元素，所以用这个清除浮动当然没有作用。。。
■网友
clearfix清除浮动是给浮动元素的父级加上clearfix类，而不是给浮动元素加上clearfix类。其实你只想清除div2对div3的影响，直接在div3上写clear：both即可。如果非得要用clearfix方法，就给div2加个父级，添上clearfix类，不过多此一举了。clearfix一般用在父级下的子元素均是浮动，为了让父级获得高度，而给父级加上clearfix这个类。
■网友
div:after等同于\u0026lt;div\u0026gt;main\u0026lt;div\u0026gt;after\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;是在元素末尾添加，而不是之后完全纯净的html好像不行
■网友
这个问题我也遇到过，首先的你方法适用于 父级元素上，让里面的元素浮动在外侧清除\u0026lt;!DOCTYPE html\u0026gt;\u0026lt;style\u0026gt;.clearfix:after { content:"\\200B"; display:block; height:0; clear:both; } .clearfix{*zoom:1;}/*IE/7/6*/.div1{background:#f00;width:300px;height:200px;float:left;}.div2{background:#0f0;width:350px;height:250px;float:left;}.div3{background:#00f;width:400px;height:300px;}/*.div3{clear:both;}*/\u0026lt;/style\u0026gt;\u0026lt;div class="div clearfix "\u0026gt; \u0026lt;div class="div1"\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;div class="div2"\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;div class="div3"\u0026gt;\u0026lt;/div\u0026gt;


    推荐阅读


    上一篇：江苏■江苏75项水利重点工程202个在建标段全部复工

    下一篇：隧道■南京长江五桥夹江隧道全线贯通