英文:
confusion about float and clear
问题
我有一个简单的示例：
<head>
<title>浮动</title>
<style>
.name2:after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="wrapper">
<div style="float: left; background-color: red">
name 1
</div>
<div class="name2" style="float: left; background-color: blue">
name 2
</div>
<div style="background-color: purple">
name 3
</div>
<div style="background-color: pink">
name 4
</div>
</div>
<div>
next line
</div>
</body>
</html>
和结果如下：
我期望带有内容 "name 3" 的 div 位于两个浮动 div "name 1" 和 "name 2" 的下方。为什么样式部分的 clear: both 没有任何效果呢？
我知道我可以改为写成：
.name2 + div {
clear: both;
}
然后我就可以得到所期望的行为。
英文:
I have a simple example:
<html>
<head>
<title>Float</title>
<style>
.name2:after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="wrapper">
<div style="float: left; background-color: red">
name 1
</div>
<div class="name2" style="float: left; background-color: blue">
name 2
</div>
<div style="background-color: purple">
name 3
</div>
<div style="background-color: pink">
name 4
</div>
</div>
<div>
next line
</div>
</body>
</html>
and the result is the following
I expected that the div with content "name 3" is below the two floating divs "name 1" and "name 2". Why doesn't the clear: both in the style section have any effect?
I know that I can write instead
.name2 + div {
clear: both;
}
and I get the desired behavior.
答案1
得分: 1
你不能通过在浮动元素内部使用清除属性来清除浮动。清除应该在浮动元素之后进行，而不是在内部。
伪元素的技巧通常用于包含所有浮动元素的容器上，以清除它们，因为::after位于它们之后。
英文:
You cannot clear float by using the clear property on an element that is inside the float element. The clear should be done after and not inside.
The technique of the pseudo element is generally used on the container that contain all the float elements to clear them since the ::after is placed after them
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论