Question

为什么<h1>标记清除两者都在底部，如果摆脱“清除两者”，它工作正常，我怎样才能让它清楚地工作？

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gbk"/>
<style>
#left{
    float:left;
    width:200px;
    height:400px;
    background:#cfc;
}
#main{
    margin-left:210px;
    background:#f9c;
    height:400px;
}
h1{
    clear:both;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="main">
    <h1>test</h1>
</div>
</body>
</html>

Answer 1

Alien先生的评论解释了为什么您遇到问题，以及解决问题的简单方法是将以下代码添加到CSS中，并从h1属性中删除clear: both：

#main:after {
    visibility: hidden;
    content: " ";
    clear: both;
    height: 0;

}

如果你要疯狂，那么创建一个可以应用于元素的clearfix类会更容易。 Here is a link描述了如何做到这一点。

Answer 2

您的问题：

1-为什么带有两者的标签位于底部？

根据css specs for clear：

<强>两个
要求框的顶部边框边缘位于所产生的任何右浮动和左浮动框的底部外边缘下方来自源文档中较早的元素。

因此clear:both;上的h1也会清除之前的元素上的浮点数，该元素甚至不是{{1}的div的一部分}}

2-如何清除它们？

如果您需要h1 clear:both;并将其保留在容器h1的开头，最简单的方法是将div添加到容器中。< / p>

Demo

overflow:auto;

Answer 3

它正常运作。受影响的布局是H1之一。不是主要的布局。 W3c说.. “clear属性表示元素框的哪些边可能与早先的浮动框不相邻。”

所以你的H1正在下降，直到它完成约束。 H1是主要div的孩子并不重要。它也必须完成约束。

enter image description here 因此，如果您（出于任何原因）需要将两者都清除到H1并同时避免与之前的浮动框相关的约束，则必须绝对位置为main。你还需要一个包含块，所以我添加了相对定位的div容器

您可以在此fiddle

中看到它的工作原理

#container {
position:relative;
}
#left{
    float:left;
    width:200px;
    height:400px;
    background:#cfc;
}
#main{
    position:absolute;
    left:210px;
    right:0px;
    background:#f9c;
    height:400px;

}

h1{
    clear:both;    
}

CSS布局清除都会影响流程

3 个答案:

Demo