Html 通过css pseudo:after清除两者的一些奇怪的东西

检查此代码：

HTML

<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">

<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">

---

为什么在上例中，

清除两个
后的
元素不起作用？在布局内部使用
进行清除时，它会自行工作。
尝试此操作，添加
显示：块
以输入：

CSS

.one {
display: block;
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ffffff;
font-size:34px;
font-weight: 800;
}
.one:after { clear: both; }
.two {
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
  }

.one {
  display: block;
  width: 450px;
  height: 60px;
  padding-top: 25px;
  color: #ffffff;
  font-size: 34px;
  font-weight: 800;
  text-align: left;
}

.two {
  font-size: 150%;
  width: 200px;
  height: 20px;
  display: block;
  margin:0 auto;
}

HTML

<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">

<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">

Sometext在这里

如果您向父元素提供
clearfix
，那就太好了。请尝试此代码片段，希望能对您有所帮助。我还包括了
：before
，但这是清除浮动的最佳方法。这里是jsfiddle链接


.one{
显示：块；
浮动：左；
宽度：450px；
高度：60px；
填充顶部：25px；
颜色：#111；
字体大小：34px；
字号：800；
}
.clearfix:之前，
.clearfix:之后{
内容：“；
显示：表格；
}
.clearfix:之后{
明确：两者皆有；
}
.clearfix{
*缩放：1；
}
.二{
保证金：0自动；
字体大小：150%；
宽度：200px；
高度：20px；
}

这里有一些文字
：在
之后，清除浮动技巧对伪元素父元素中的浮动元素有效

如果将
放在
h1
中，也不会清除浮动，因此它必须是浮动元素的同级元素或父元素

因此，在您的情况下，只需清除
输入上的浮点值


.one{
浮动：左；
宽度：450px；
高度：60px；
填充顶部：25px；
颜色：#ccc；
字体大小：34px；
字号：800；
}
.二{
显示：块；
保证金：0自动；
字体大小：150%；
宽度：200px；
高度：20px；
明确：两者皆有；
}
Sometext在这里
你想做什么？试试这个。一：在{content:”；display:table；clear:both；}之后尝试了一下。。。伪元素不起作用。我搞不懂…哈哈。人们投票反对，但没有提供任何解决方案。。。惊人：）奇怪的事情。。。我用我所有的浏览器都试过了。。。IE、ff、chrome、opera。。。对我来说，它不是居中的。该死的…还有我给你的url…你能看看是否可以吗？-以前尝试过显示块。这里是我得到的：我更新我的答案而不使用浮点数-我知道，路易斯：）我可以让它在没有浮点数的情况下工作，我只是不理解在正常div工作时不使用after伪元素清除浮点数的行为，我可以简单地在
h1
标记之后使用
。。。我不是在寻找一个额外的布局