clear: both;的新手问题，为啥后面元素清除不了

显示全部楼层 · 2021-1-27 05:57:27

Document
div>div{
float:left;
}
div#d3{
clear:both;
}

d1
d2
d3
d4

为啥最后显示：
d1d2
d3d4
clear:both;不是清除2侧吗？
我觉得应该显示：
d1d2
d3
d4
老师给讲讲为啥不是我想的这样？谢谢啦~！
分 -->

千问 · 2021-1-27 05:57:27

我感觉clear的作用一般用于父元素内部有多个float元素，因为float元素会半脱离文档流，导致父元素高度垮塌，即父元素没有高度或者影响父元素下面的其他元素，一般在父元素闭合标签前放置一个div，内容为空，样式{clear:both;}，或者给父元素添加伪类::after{content:"";clear:both;}这样父元素容器会完整包裹各个float的子元素。
你这个想要达到目标效果只需将d3不要放到float范围内就可以了，可以div.div:not(#d3)就可以了。至于问题产生的原因自然是clear本身带来的，我觉得这个解释比较好，
left:不与左浮动的元素产生边界接触；
right:不与右浮动的元素产生边界接触；
both:不与左浮动和右浮动的元素产生边界接触；
它的描述是不产生边界接触，如果上面几个元素是float，紧接着的元素不是float，必定因为半脱离文档流发生边界接触（区域重叠），这个时候设置clear，肯定会另起一行，如果它本身就是float的话，根本不会重叠，也就不会生效了吧。

千问 · 2021-1-27 05:57:27

1楼已经回复的很好了

。
顺便说下我的看法，从你写的来看，其实clear:both;已经清除了两侧的浮动，但是你又给d3设置了左浮动，在新的一行d4没有了浮动，所以会和d3在一行显示。你可以试试把d2、d4的浮动去掉，d3的clear:both;也去掉，效果是一模一样的。