Html CSS布局清除都会影响流_Html_Css

Html CSS布局清除都会影响流

html css

Html CSS布局清除都会影响流,html,css,Html,Css,为什么带有clear-tweet的标记位于底部，如果去掉“clear-tweet”，它可以正常工作，我如何才能让它与clear-tweet一起工作 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=gbk"/> <style> #left{ float:left; width:200px;

为什么带有clear-tweet的

标记位于底部，如果去掉“clear-tweet”，它可以正常工作，我如何才能让它与clear-tweet一起工作

<!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>


#左{
浮动：左；
宽度：200px；
高度：400px；
背景：#cfc；
}
#主要{
左边距：210像素；
背景#f9c；
高度：400px；
}
h1{
明确：两者皆有；
}
测试

Alien先生的评论解释了问题产生的原因，解决问题的简单方法是将以下代码添加到CSS中，并从您的h1属性中删除

清除：两个：
#main:after {
    visibility: hidden;
    content: " ";
    clear: both;
    height: 0;

}

如果您要疯狂地使用float，那么创建一个可以应用于元素的clearfix类就更容易了。这说明了如何做到这一点。
Alien先生的评论解释了您出现问题的原因，解决问题的简单方法是向CSS中添加以下代码，并从h1属性中删除清除：两个：
#main:after {
    visibility: hidden;
    content: " ";
    clear: both;
    height: 0;

}

如果您要疯狂地使用float，那么创建一个可以应用于元素的clearfix类就更容易了。这说明了如何准确地做到这一点。它正在按其应该的方式工作。
受影响的布局是H1的布局之一。不是主要的布局。
W3c说“clear属性指示元素框的哪些边可能与先前的浮动框不相邻。”
因此，H1将下降，直到它完成约束。
H1是否是main div的子级并不重要。它还必须完成约束

因此，如果（出于任何原因）需要对H1应用清除，同时避免与上一个浮动框相关的约束，则必须绝对定位main。您还需要一个包含块，因此我添加了div容器
你可以看到它在这里工作
它正在按它应该的方式工作。
受影响的布局是H1的布局之一。不是主要的布局。
W3c说“clear属性指示元素框的哪些边可能与先前的浮动框不相邻。”
因此，H1将下降，直到它完成约束。
H1是否是main div的子级并不重要。它还必须完成约束

因此，如果（出于任何原因）需要对H1应用清除，同时避免与上一个浮动框相关的约束，则必须绝对定位main。您还需要一个包含块，因此我添加了div容器
你可以看到它在这里工作
你的问题：
1-为什么带有clear Duth的标签位于底部？
根据：
两者都有

要求框的上边框边缘低于生成的任何右浮动框和左浮动框的下外缘
来自源文档前面的元素
所以很清楚：两者都有onh1
还清除先前元素上的浮动，该元素甚至不是h1
的包含div
的元素的一部分
2-如何使clear两者都起作用？
如果您需要保持清晰：两者都是
在h1
上，并将其保持在容器的开头div
，最简单的方法是添加溢出：auto到容器

你的问题：
1-为什么带有clear Duth的标签位于底部？
根据：
两者都有

要求框的上边框边缘低于生成的任何右浮动框和左浮动框的下外缘
来自源文档前面的元素
所以很清楚：两者都有onh1
还清除先前元素上的浮动，该元素甚至不是h1
的包含div
的元素的一部分
2-如何使clear两者都起作用？
如果您需要保持清晰：两者都是
在h1
上，并将其保持在容器的开头div
，最简单的方法是添加溢出：auto到容器

我在这里的回答将解释你需要H1在主分区的顶部内？我认为它应该在主分区的顶部，两者的清晰不应影响主分区的布局。我在这里的回答将解释你需要H1在主分区的顶部内？主分区？我认为它应该在主分区的顶部，而且clear-both不应该影响主div的布局。但是如果我在主div中有其他标记clear:both呢？我不能在main中的任何元素中使用clear:both吗？clear:both
属性将选择器转换为浮动元素之间的分隔符。因此，任何接收到clear:both
属性的选择器都将位于div下。清除浮动的正确方法是我发布的内容。但是如果我在主div中有其他标记clear:both如何？我不能在main中的任何元素中使用clear:both吗？clear:both
属性将选择器转换为浮动元素之间的分隔符。因此，任何接收到clear:both属性的选择器都将位于div下。清除浮动的正确方法是我发布的。您能告诉我为什么overflow auto可以打破清除规则吗？您能告诉我为什么overflow auto可以打破清除规则吗？
#main {
    margin-left:210px;
    background:#f9c;
    height:400px;
    overflow:auto;
}