61,126
社区成员
发帖
与我相关
我的任务
分享clear: both;的新手问题，为啥后面元素清除不了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div>div{
float: left;
}
div#d3{
clear: both;
}
</style>
</head>
<body>
<div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
</div>
</body>
</html>
为啥最后显示：
d1d2
d3d4
clear: both;不是清除2侧吗？
我觉得应该显示：
d1d2
d3
d4
老师给讲讲为啥不是我想的这样？谢谢啦~！
...全文
请发表友善的回复…
发表回复
潇湘忆梦 2019-06-13
- 打赏
- 举报
1楼已经回复的很好了
。
顺便说下我的看法，从你写的来看，其实clear: both;已经清除了两侧的浮动，但是你又给d3设置了左浮动，在新的一行d4没有了浮动，所以会和d3在一行显示。你可以试试把d2、d4的浮动去掉，d3的clear: both;也去掉，效果是一模一样的。
。
顺便说下我的看法，从你写的来看，其实clear: both;已经清除了两侧的浮动，但是你又给d3设置了左浮动，在新的一行d4没有了浮动，所以会和d3在一行显示。你可以试试把d2、d4的浮动去掉，d3的clear: both;也去掉，效果是一模一样的。
河南棒小伙 2019-06-12
- 打赏
- 举报
我感觉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的话，根本不会重叠，也就不会生效了吧。
